docs(kbs): add kbs for july

knowledge-base/chart-click-to-expand-pie-series.md

@@ -0,0 +1,57 @@
+---
+title: Exploding Pie/Donut Chart Series On Click
+description: This article demonstrates how to enable click-to-expand functionality for pie chart segments in a Vue application.
+type: how-to
+page_title: Exploding Pie/Donut Chart Series On Click
+slug: chart-click-to-expand-pie-series
+tags: vue, pie chart, click, expand, chart series
+res_type: kb
+ticketid: 1651859
+---
+
+## Environment
+
+| Product | Version |
+| --- | --- |
+| Chart for React | Current |
+
+## Description
+
+How can I make the Pie or Donut Chart series explode when clicking them?
+
+## Solution
+
+To achieve click-to-expand functionality in a Vue pie chart you should:
+
+1. Handle the [`seriesClick`](slug:api_charts_chartcomponent#toc-seriesclick) event:
+
+````html
+<Chart @seriesclick="onSeriesClick">
+</Chart>
+````
+
+2. Within the event handler function, toggle the [`explodeField`](slug:api_charts_seriesitemcomponent#toc-explodeField) property and update the Chart data by reference to re-render the Chart.
+
+```JavaScript
+onSeriesClick(event) {
+  const newData = this.pieData.map((item) => {
+    item.exploded = item === event.dataItem ? !item.exploded : false;
+    return item;
+  });
+
+  this.pieData.value = newData;
+}
+```
+
+### Runnable example
+{% meta height:600 %}
+{% embed_file chart-click-to-expand-pie-series/main.vue preview %}
+{% embed_file chart-click-to-expand-pie-series/main.js %}
+{% endmeta %}
+
+
+## See Also
+
+- [Kendo UI for Vue Charts Documentation](https://www.telerik.com/kendo-vue-ui/components/charts/)
+- [Chart SeriesItem Component](https://www.telerik.com/kendo-vue-ui/components/charts/api/ChartSeriesItemProps/)
+- [Handling Events in Kendo UI for Vue Charts](https://www.telerik.com/kendo-vue-ui/components/charts/events/)

knowledge-base/daterangepicker-validate-range.md

@@ -0,0 +1,40 @@
+---
+title: Show invalid state for DateRangePicker if start date is after end date
+description: An example on how to validate the DateRangePicker based on the start and end dates
+type: how-to
+page_title: Set Invalid State If Start Date Is After End Date - Kendo UI for Vue DateRangePicker
+slug: daterangepicker-validate-range
+tags: daterangepicker, validation, range, invalid
+ticketid: 
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+<table>
+    <tbody>
+	    <tr> 
+	    	<td>Product Version</td>
+	    	<td>5.1.0</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® Kendo UI for Vue</td>
+	    </tr>
+    </tbody>
+</table>
+
+
+## Description
+I want to set the DateRangePicker to invalid state or show error message if the start date is after the end date.
+
+
+## Solution
+Set the "valid" property of the DateRangePicker to a state variable that can be changed to "true" or "false" within the onChange event of the DateRangePicker based on the "start" and "end" values.
+
+### Runnable example
+{% meta height:500 %}
+{% embed_file donut-chart-multiple-series-different-label-colors/main.vue preview %}
+{% embed_file donut-chart-multiple-series-different-label-colors/main.js %}
+{% embed_file donut-chart-multiple-series-different-label-colors/donut-series-data.json %}
+{% endmeta %}

knowledge-base/examples/chart-click-to-expand-pie-series/main.js

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

knowledge-base/examples/chart-click-to-expand-pie-series/main.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <Chart @seriesclick="onSeriesClick">
+      <ChartTitle :text="'World Population by Broad Age Groups'" />
+      <ChartLegend :position="'bottom'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'pie'"
+          :data-items="pieData"
+          :field="'value'"
+          :category-field="'category'"
+          :explodeField="'exploded'"
+          :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,
+          exploded: true,
+        },
+        {
+          category: "15-24",
+          value: 0.1552,
+          exploded: false,
+        },
+        {
+          category: "25-54",
+          value: 0.4059,
+          exploded: false,
+        },
+        {
+          category: "55-64",
+          value: 0.0911,
+          exploded: false,
+        },
+        {
+          category: "65+",
+          value: 0.0933,
+          exploded: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    labelContent(props) {
+      let formatedNumber = Number(props.dataItem.value).toLocaleString(
+        undefined,
+        {
+          style: "percent",
+          minimumFractionDigits: 2,
+        }
+      );
+      return `${props.dataItem.category} years old: ${formatedNumber}`;
+    },
+    onSeriesClick(event) {
+      const newData = this.pieData.map((item) => {
+        item.exploded = item === event.dataItem ? !item.exploded : false;
+        return item;
+      });
+
+      this.pieData.value = newData;
+    },
+  },
+};
+</script>

knowledge-base/examples/daterangepicker-validate-range/main.js

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

knowledge-base/examples/daterangepicker-validate-range/main.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="example-wrapper">
+    <DateRangePicker
+      :valid="rangePickerValidation"
+      @change="rangePickerChange"
+    />
+    <div v-if="!rangePickerValidation">
+      <span class="k-text-error" style="font-style: italic; font-size: 10px">
+        * Start date should be before End date
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  name: "App",
+  components: {
+    DateRangePicker,
+  },
+  data() {
+    return {
+      rangePickerValidation: true,
+    };
+  },
+  methods: {
+    rangePickerChange(ev) {
+      this.rangePickerValidation = ev.value.start < ev.value.end;
+    },
+  },
+};
+</script>