How to set all component properties readonly when loading param from page?

[Ivan Halim]

I need to set readonly properties on all component in the page when loading a page with readonly parameter, and hide all edit and add button on grid .

how to do that to syncfusion component properly by code/function? Thank You

[Balaji Sekar]

Hi Ivan , 

  

Thanks for contacting Syncfusion support. 

  

Query #1: I need to set readonly properties on all component in the page when loading a page with readonly parameter 

  

Based on your query you have mentioned that you need to set the read-only option in all components. So, before we proceed with your query we need the following details, 

 

1. Share the Syncfusion Components that you are used in your application. 

 

2. In your update you also mentioned that you need to hide all edit and add button on Grid. By default, in EJ2 Grid we will display the Add and Edit Button in the toolbar. So, do you need to disabled the button in the toolbar? 

 

3. You need to set read-only properties in the component, but we are unclear about your exact requirement. So, please provide the screenshot or video demonstration of your requirement. 

 

4. Share the code example of Syncfusion Component in your application.  

 

Regards, 

Balaji Sekar. 

[Ivan Halim]

Here is my syncfusion component , i found something worked / resolved my need with this

import Vue from "vue";

import {

  TextBoxPlugin,

  NumericTextBoxPlugin,

  MaskedTextBoxPlugin,

} from "@syncfusion/ej2-vue-inputs";

import {

  ButtonPlugin,

  CheckBoxPlugin,

  RadioButtonPlugin,

} from "@syncfusion/ej2-vue-buttons";

import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";

import {

  AccordionComponent,

  AccordionPlugin,

} from "@syncfusion/ej2-vue-navigations";

import { GET_DATA } from "@/store/constants";

import loginInfo  from "@/store/modules/auth/state";

import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";

import EvoComboBox from '@/components/ComboBox/ComboBoxComponent';

import FormMaster from "@/Form.Master";

Vue.use(RadioButtonPlugin);

Vue.use(MaskedTextBoxPlugin);

Vue.use(TextBoxPlugin);

Vue.use(NumericTextBoxPlugin);

Vue.use(ButtonPlugin);

Vue.use(DatePickerPlugin);

Vue.use(CheckBoxPlugin);

Vue.use(AccordionPlugin);

Vue.component(AccordionPlugin.name, AccordionComponent); at Mounted , i call my form master function for setting readonly

  mounted: function () {

    FormMaster.setReadOnly(this.$children); at FormMaster.js

var FormMaster = {

    setReadOnly(chld) {

        chld.forEach((chld) => {

            if (chld.$children.length > 0) this.setReadOnly(chld.$children);

            try {

                if (chld.$options._componentTag == "ejs-grid") {

                    chld._data.ej2Instances.toolbarModule.destroy();

                }

                chld.ej2Instances.readonly = true;

                chld.ej2Instances.disabled = true;

                if (chld.ej2Instances.element.innerText == "SAVE")

                    chld.ej2Instances.disabled = true;

            } catch { }

        });

    }

}

export default FormMaster

Thank you for the response, I'll still willing to know , if there any better solution than this? Thank you

[Balaji Sekar]

Hi Ivan, 

  

Thanks for your update. 

 

In your code example you have shared only the imported Syncfusion components, but we need the component rendering code example.  

 

In this we also found that you have taken the grid instance and define read-only as true. So, based on your code example we unable to get your exact requirement in the Syncfusion components. 

 

Please share the below details which will help us to provide the proper solution, 

 

1. Share the component rendering code snippet. 

 

2. Share the video demonstration of your requirement.  

  

Regards, 

Balaji Sekar.