Hi,
I have scenario that we need to hide or show Save button in vue depend on store event listeners in Bryntum grid APPConfig.js .Can you please explain step by step approach to achieve this.
Note :I need to call do in APPconfig.js only
Hi Below is the code of APPConfig.js
store: {
listeners: {
Update()
{
//Button hide logic for save button in vue file
}
}
}
}
In the Above code whenever store is changed i need show save button (Initially save button is not visible ).
<template>
<button v-if="(Logic to hide button)">Save</button>
</template>
Note: i need to achieve this in App config js only. My doubt is how to hide save button(In VUE file) from APPconfig.js
Your code snippet looks correct, you need to listen to https://bryntum.com/products/gantt/docs/api/Core/data/AjaxStore#event-change event. There is also https://bryntum.com/products/gantt/docs/api/Core/data/AjaxStore#property-changes that you could review.
Second part of your question is about Vue code and Vue component states. I am not Vue expert and cannot suggest you best practices of Vue code, better to ask this in Vue forums. But anyway I will try to help.
Config files are designed to contain static data. It's much easier to get button in Vue file than in external JavaScript object file.
I guess you could try to bind your button state to some property of that config, and change it inside event listener.
All the best,
Alex
Hey thejas.pateel,
I created a quick sample to demonstrate how to achieve the behavior that you asked.
App.vue
<template>
<div>
<!-- BryntumDemoHeader component is used for Bryntum example styling only and can be removed -->
<bryntum-demo-header />
<bryntum-grid ref="grid" :groupFeature="false" v-bind="gridConfig" />
<button :disabled="isButtonDisabled">test</button>
</div>
</template>
<script>
// vue imports
import { reactive, ref } from "vue";
// app components
import { BryntumDemoHeader, BryntumGrid } from "@bryntum/grid-vue-3";
import { useGridConfig } from "@/AppConfig";
export default {
name: "App",
components: {
BryntumDemoHeader,
BryntumGrid,
},
setup() {
const isButtonDisabled = ref(false);
const gridConfig = reactive(useGridConfig(isButtonDisabled));
return {
gridConfig,
isButtonDisabled,
};
},
};
</script>
AppConfig.js
const useGridConfig = (isButtonDisabled) => {
return {
... other configurations
store: {
listeners: {
change: () => {
isButtonDisabled.value = !isButtonDisabled.value;
}
}
}
};
};
export { useGridConfig };
Best regards,
Márcio