docs(splitbutton): add disable left part kb

knowledge-base/examples/splitbutton-disable-left-part/main.js

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

knowledge-base/examples/splitbutton-disable-left-part/main.vue

@@ -0,0 +1,25 @@
+<template>
+    <div><splitbutton :items="items" :text="'Enabled Button'" /> &nbsp;</div>
+  </template>
+
+  <script>
+  import { SplitButton } from '@progress/kendo-vue-buttons';
+  
+  export default {
+    components: {
+      splitbutton: SplitButton,
+    },
+    data: function () {
+      return {
+        items: ['Item1', 'Item2', 'Item3'],
+      };
+    },
+  };
+  </script>
+
+  <style>
+  .k-button-group > .k-button:first-child:not(:only-child) {
+    pointer-events: none;
+  }
+  </style>
+

knowledge-base/splitbutton-disable-left-part.md

@@ -0,0 +1,48 @@
+---
+title: Disable the left part of a SplitButton
+description: An example on how to disable the left part of a SplitButton
+type: how-to
+page_title: Learn how to disable the left part of a SplitButton
+slug: splitbutton-disable-left-part
+tags: splitbutton, disable, button, left
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>4.3.1</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® Kendo UI for Vue Native</td>
+	    </tr>
+    </tbody>
+</table>
+
+## Description
+
+I want to disable only the left part of the SplitButton.
+
+## Solution
+
+You can achieve this by setting [pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) to `none:
+
+```css
+.k-button-group > .k-button:first-child:not(:only-child) {
+    pointer-events: none;
+ }
+```
+
+### Runnable example
+
+To test the following example, click on the left part of the SplitButton
+
+{% meta height:350 %}
+{% embed_file splitbutton-disable-left-part/main.vue preview %}
+{% embed_file splitbutton-disable-left-part/main.js %}
+{% endmeta %}