Our blazing fast Grid component built with pure JavaScript


Post by thejas.pateel »

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


Post by mats »

Can you please share your code so we have some context?


Post by thejas.pateel »

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


Post by thejas.pateel »

Hi,
Please Provide solution ASAP.We are in the middle of development


Post by alex.l »

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


Post by thejas.pateel »

Hi,
Atleast guide me how to write store listeners in vue file. with code snippet.rather writing in Appconfig.js


Post by marcio »

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


Post by thejas.pateel »

Hi,
Thank you soo much for your help.


Post by thejas.pateel »

Hi,
thanks


Post Reply