How can I get a "read" dialog template for the CRUD action ?

Question

Dear support,

I would like to use a data grid like this : https://ej2.syncfusion.com/vue/demos/#/material/grid/dialog-template.html

However in the example I can't see the dialog-temp.vue file.

So I have sevral questions :

1/ Would it be possible to get an online sample with the dialog-temp included ?

2/ How is it possible to force the width Dialog ?

3/ In the CRUD dataGrid I have something missing : Since all my datas won't be showed in the grid, I would like to have a "Read" action next to "add, update,delete", that would show another dialog in order to see every datas from the line that I would have selected .
Is it possible ?

4/ I have seen that when I double-click one line, it shows the dialog template in "Edition mode".
A => Is it possible to desactivate the double click event ?
B => if it is not possible, would it be possible to change the double click event to put right here another dialog template that would be my "read template " dialog ?

5/ When , for instance, I click on the "Add" action and click the "save" button, where in the TemplateDialog will I have to put my code to save my datas ?
I can't see where the "save" event is triggered.

6/ Then I will create a new item, How is it possible to refresh data grid when the dialog close with all brand news datas from my API including the item I have just created ?

Would it be possible to have an online sample for all of these 4 questions ?

Thank you very much in advance :)

Ps : I have tried to create two files : List.vue with a grid with, and Create.Vue the Dialog template file, but when I click on the "save" button from the dialog it adds an empty line in the datagrid. Here is my code in a zipfile.

Moreover I don't know how to bind the datas when I am on the edit mode, knowing that my datas come from the props" employeeList" from the list.Vue file

Sandra Bordier · Answer

Here is the zip file, sorryAttachment: code_ab6f12d6.zip

Vignesh Sivagnanam · Answer

Hi Sandra 
  
Thanks for contacting Syncfusion support 
  
Query 1 : Would it be possible to get an online sample with the dialog-temp included ? 
  
Please refer the below sample for your reference, 
  
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart273697112.zip 
  
Query 2 : How is it possible to force the width Dialog ? 
  
Based on your query you like to change the width of the dialog template in the grid. you can achieve your requirement by increasing the dialog with in the EJ2 Grid actionComplete event and the requestType as beginEdit.  
  
Please refer the below code example for your reference, 
  




actionComplete(args) { 
      if (args.requestType === "beginEdit") { 
        var dialog = document.getElementsByClassName("e-edit-dialog")[0].ej2_instances[0]; 
        dialog.width = "400px"; 
      } 
    } 
  
  
Query 3 : show dialog in order to see every datas from the line that I would have selected . 
  
Based on your query, we suspect that you want to display and edit the values of the column in the dialog template that is not present in the grid. By default, the EJ2 dialogTemplate feature is used to customize the Elements displayed in the edit dialog.  
  
We have prepared a sample by displaying five elements and only three columns are displayed in the grid. Please refer the above sample and screenshot for your reference, 
  
  
  
Query 4 :  Is it possible to desactivate the double click event ? 
  
We susoect that you want to disble the doube click on the records to edit the grid row. We suggest you to use the allowEditOnDblClick as false on the edit setting of the grid. 
  
Please refer he below Documentation for your reference, 
  
API Docs : https://ej2.syncfusion.com/documentation/api/grid/editSettings/#alloweditondblclick 
  
Query 5 : I can't see where the "save" event is triggered. 
  
By default, In EJ2 Grid the actionBegin and actionComplete events are triggered with the requestType as save. You can access the data that your have entered in the dialog template.  
  
Please refer the below Documentation for your reference, 
  
Documentation : https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 
https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete 
  
Query 6 : when the dialog close with all brand news datas from my API including the item I have just created ? 
  
Based on your query, you want to save the entered value in the dialog to the EJ2 grid. By default, the grid added the new data to the grid and refreshed to displayed the newly added data. Please share that are you using local data or remote data binding in your grid. 
  
Please get back to us for further assistance, 
  
Regards 
Vignesh Sivagnanam