how to use the dialog and headerTemplate configuration of the grid's editSettings object

[Ryan]

Hello, I'm using the grid to display and I'm going through the props to editSettings settings.

However I am stuck in the use of some settings, headerTemplate, dialog.

I would like an example of how to configure both

In the template component, I have the form that edits the row data

[Sujith Kumar Rajkumar]

Hi Ryan, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to define the header template and enable resizing for the edit dialog in the Grid. This can be achieved as explained below, 

 

Edit dialog header template: 

 

The header template for the edit dialog can be defined as demonstrated in the below code snippet, 

 

editSettings: { 

    allowEditing: true, 

    mode: "Dialog", 

    headerTemplate: function () { 

        return { 

            template: Vue.component("header-template", { 

                template: `<div>Edit Data</div>`, 

            }), 

        }; 

    }, 

} 

 

Edit dialog properties: 

 

The edit dialog properties can be defined as demonstrated in the below code snippet, 

 

editSettings: { 

    allowEditing: true, 

    mode: "Dialog", 

    dialog: { params: { enableResize: true } } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://codesandbox.io/s/vue-forked-zy1im?file=/src/App.vue 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R