Inform the user that parent column combobox must be chosen first

src/assets/main.css

@@ -24,4 +24,8 @@ div#app {
 
 .vc-container {
   font-family: 'Roboto' !important;
+}
+
+:root {
+  --vs-font-size: 1em!important;
 }

src/components/Grid/Main/Filter/Combobox.vue

@@ -2,6 +2,7 @@
   <v-select
       v-model="filterValue"
       :options="options"
+      :placeholder="placeholder"
       @open="updateOptions"
   ></v-select>
 </template>
@@ -20,7 +21,9 @@ export default {
     changeValue: {
     },
     filter: {
-    }
+    },
+    placeholder: {
+    },
   },
   data() {
     return {

src/components/Grid/Main/Filter/ComboboxFilter.js

@@ -7,9 +7,10 @@ export default {
       Combobox
     },
     template: `<Combobox
-      :field="params.field"
-      :filter="filter"
-      :change-value="updateFilter"
+        :field="params.field"
+        :filter="filter"
+        :change-value="updateFilter"
+        :placeholder="placeholder"
     />`,
     mounted() {
         this.params.api.sizeColumnsToFit()
@@ -19,6 +20,19 @@ export default {
             filter: '',
         };
     },
+    computed: {
+      placeholder() {
+          let parentColumnName = this.params.column.userProvidedColDef.filterParams.parentColumn
+          if (parentColumnName) {
+              let filterInstance = this.params.api.getFilterInstance(parentColumnName)
+              if (!filterInstance.filter || filterInstance.filter === '') {
+                  let displayName = filterInstance.params.column.userProvidedColDef.headerName
+                  return `Please select ${displayName} first`
+              }
+          }
+          return ''
+      }
+    },
     methods: {
         updateFilter(value) {
             this.filter = value