modify the dialog from the edit mode of Grid

[Franky Lee]

Hi, 

I try this example (https://ej2.syncfusion.com/vue/documentation/grid/edit/#dialoginline-template)

How can I change the properties of dialog(such as its width, color, etc.) from the edit mode is this code.

Thanks 

Franky 

[Balaji Sekar]

Hi Franky, 

 

Greetings from the Syncfusion support. 

 

Query: How can I change the properties of dialog(such as its width, color, etc.) from the edit mode 

 

Based on your query we want to override dialog popup CSS properties while dialoginline template editing. To achieved your requirement using actionComplete with “beginEdit” requestType and we can access the dialog component instance in this event since you can achieve your requirement using following code example. 

 

Please refer the below code example for more information. 

[App.Vue] 

methods: { 

    actionComplete(args) { 

        if (args.requestType === 'beginEdit') { 

              args.dialog.width = 300; 

             args.dialog.headerContent.style.background = “grey”; 

        } 

    } 

  } 

 

Help Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar 

[Franky Lee]

Hi,

Thank you for your reply.

I have one more question.

In this sample (https://ej2.syncfusion.com/vue/documentation/grid/edit/#dialoginline-template),

how can I get the data from the dialoginline-template(or Vue.component) and show in the parent template?

Thanks a lot.

Franky

[Prasanna Kumar Viswanathan]

Hi Franky, 

 

Thanks for the update. 

 

Based on your query you have mentioned that you need to get the data from the dialog-inline template. Before we proceed with your query we need the following details, 

 

1. In this you have mentioned that you need to show the data in parent template. Please share the screenshot and code example of parent template. 

 

2. Share the complete Grid rendering code. 

 

3. Share the screenshot or video demonstration of your requirement. 

 

Regards, 

Prasanna Kumar N.S.V 

[Franky Lee]

Hi,

Thanks for your reply.

There is my code based on this example.

Because there are many checkbox item in my dialog, I use the "Y" to replace the true from the checkbox.

When I start to edit the existing data in the grid, the value of checkbox doesn't correspond to the selected row.

I used this action:

    actionComplete(args) {

      if (args.requestType === "beginEdit") {

        args.form[4].checked = args.rowData.MG005 === "Y" ? true : false;

        console.log(args);

      },

is there any error in this code?

Thanks 

Franky

Attachment: dialogexample_51734a1a.zip

[Balaji Sekar]

Hi Frankly, 

 

Thanks for your update. 

 

We have analyzed the provided code example and we can see MG005 field has checkbox component’s label in disable state while editing. 

 

By default, we can perform the edit operation in the Grid field and also access the corresponding field value while editing. If you customize editing input component/template in edit mode using dialog template option  

 

Please ensure that you want to override the Grid’s dataSource value in mentioned checkbox type field or you need to change checkbox label value in display purpose alone while editing. If we misunderstood your requirement, please share explain your exact requirement to us that will help to validate further. 

 

Regards, 

Balaji Sekar