Custom dialog template

[Amin H]

Dear support,

I used this documentation in order to create my Dialog Grid.
https://ej2.syncfusion.com/vue/documentation/grid/edit/#dialoginline-template

In the dialog have three fields, two input texts and one uploader.

First of all, how can you validate the whole form that the uploader must include the file, and after sending the uploader form (during uploading the dialog not close and the uploader progress meter displays progress),the file will be uploaded and the save button will be deactivated during the upload, and the window will be closed after completion.

How can we call the save button event via code? (for example custom button raise the save button event)

How to enable and disable dialog save and cancel buttons via code?

[Pavithra Subramaniyam]

Hi Amin, 

Thanks for contacting Syncfusion support. 

From your update we understood that you want to disable the save button while uploading a file in the dialog. If yes,  You can achieve your requirement by disable the save button inside the “actionComplete” event and enable it inside the “success” event of File Uploader. Please refer to the below code example for more information. 

<template> 

<div id="app"> 

    <ejs-grid :dataSource='data' :editSettings='editSettings' :actionBegin="actionBegin" :actionComplete="actionComplete" :toolbar='toolbar' height='273px'> 

        <e-columns> 

            .   .  . 

            <e-column field='Files' headerText='Files' width=150></e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids"; 

import { data } from './datasource.js'; 

import DialogTemplate from "./dialogtemp.vue"; 

import { DataUtil } from '@syncfusion/ej2-data'; 

import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs'; 

 

Vue.use(GridPlugin); 

Vue.use(UploaderPlugin); 

 

export default { 

  data() { 

return { 

  data: data, 

  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog',  template: function () { 

      return { template : Vue.component('todo-item', { 

        template: `<div formGroup="orderForm"> 

    .   .    . 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <ejs-uploader ref="uploadObj" id='Files' :success="success" name="Files" :asyncSettings= "path" ></ejs-uploader> 

        </div> 

    </div> 

</div>`, 

data () { 

    return { 

        data: { 

          .  .  . 

        } 

    } 

  }, 

  methods:{ 

    success(args){ 

      var editDialog = document.querySelector(".e-edit-dialog").ej2_instances[0] 

      editDialog.btnObj[0].disabled = false; 

      // here you can also save the record using “gridObj.endEdit()” 

    } 

  },    

} 

})} 

} }, 

  toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'] 

}; 

  }, 

  provide: { 

grid: [Page, Edit, Toolbar] 

  }, 

  methods: { 

actionComplete(args) { 

    .  .  . 

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

       // disabling the Button 

      args.dialog.btnObj[0].disabled = true; 

    } 

} 

  } 

} 

</script> 

API        : https://ej2.syncfusion.com/vue/documentation/api/button#disabled 

               https://ej2.syncfusion.com/vue/documentation/api/grid#endedit 

              https://ej2.syncfusion.com/vue/documentation/api/uploader#success 

               

Please get back to us if you have any other queries. 

Regards, 

Pavithra S