Can I put grid in editor window template

Question

Hello,I'm trying to add a grid in editor window template. This is data that I will need later to create an event. It is a virtual event that people can attend and in this grid is where I add the people who will attend, entering name, surname and email. Is this possible to do? I have put the grid, but I am not able to collect that data when I create the event

Vengatesh Maniraj · Accepted Answer

Hi Sandra, Greetings from Syncfusion Support. We checked your requirement “Not able to collect the data when create an event” at our end and we suspect that you want to show the virtual events in Grid component that needs to be displayed in the editor template window. So we prepared the sample to show the virtual events in the Grid while opening the Editor window. Please refer to the below code snippet and attached sample for more reference. Create the template with Grid control var editorTemplateVue = Vue.component("editorTemplate", { template: `

Summary
From
To
Owner
Reason
Virtual Events

`, Virtual Events: data: [ { Id: 1, Subject: "Workflow Analysis", StartTime: new Date(2018, 3, 1, 9, 30), EndTime: new Date(2018, 3, 1, 12, 0), IsAllDay: false, OwnerId: 2, Name: "Smith" }, { Id: 2, Subject: "Requirement planning", StartTime: new Date(2018, 3, 1, 12, 30), EndTime: new Date(2018, 3, 1, 14, 45), IsAllDay: false, OwnerId: 1, Name: "Nancy" }, { Id: 3, Subject: "Quality Analysis", StartTime: new Date(2018, 3, 2, 10, 0), EndTime: new Date(2018, 3, 2, 12, 30), IsAllDay: false, OwnerId: 3, Name: "Paul" }, { Id: 4, Subject: "Resource planning", StartTime: new Date(2018, 3, 2, 13, 0), EndTime: new Date(2018, 3, 2, 15, 30), IsAllDay: false, OwnerId: 2, Name: "Smith" } ] Load the data to Grid on opupOpen Event. onPopupOpen: function(args) { if (args.type === "Editor") { let startElement = args.element.querySelector("#StartTime"); if (!startElement.classList.contains("e-datetimepicker")) { new DateTimePicker( { value: new Date(startElement.value) || new Date() }, startElement ); } let endElement = args.element.querySelector("#EndTime"); if (!endElement.classList.contains("e-datetimepicker")) { new DateTimePicker( { value: new Date(endElement.value) || new Date() }, endElement ); } let processElement = args.element.querySelector("#OwnerId"); if (!processElement.classList.contains("e-multiselect")) { let multiSelectObject = new MultiSelect({ placeholder: "Choose a owner", fields: { text: "text", value: "id" }, dataSource: this.ownerDataSource, value: [args.data.OwnerId] }); multiSelectObject.appendTo(processElement); } args.element.querySelector( ".e-grid" ).ej2_instances[0].dataSource = this.data; } } }, Output Sample: https://codesandbox.io/s/vue-template-bo70t?file=/src/App.vue Kindly check the above and get back to us if you need any further assistance. Regards, Vengatesh

Sandra Bravo · Answer

Hello,Thank you for your quick answerThat is not exactly what I need. There I only show the data in the table. My grid is a CRUD grid, where I can add, edit and delete data within the CREATE EVENT window.What I need is, when I click SAVE EVENT, all the data from that table is saved to me in an array to save it to a database.is it possible? Thank you in advanceRegards :)

Vengatesh Maniraj · Answer

Hi Sandra, 

Thanks for the update. 

We checked your requirement and we suggest you follow the below to achieve your requirement. 

My grid is a CRUD grid, where I can add, edit and delete data within the CREATE EVENT window. 

If you are using a separate database to perform the CRUD grid within the event window(without closing it), kindly follow the below UG to achieve this. 

CRUD Grid: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#perform-crud-operations 

What I need is, when I click SAVE EVENT, all the data from that table is saved to me in an array to save it to a database. is it possible?  

We suspect that you want to save all the events that are listed in the Grid table while saving the current editor window details and it could be possible by making use of the popupClose event. 

Before closing the popup window, collect the Grid table data and pass it to addEvent method to save in DB. 

onPopupClose: function(args) { 
      if (args.type === "Editor") { 
        this.gridData = args.element.querySelector( 
          ".e-grid" 
        ).ej2_instances[0].dataSource; 
        let scheduleObj = this.$refs.ScheduleObj; 
        scheduleObj.addEvent(this.gridData); 
      } 
    } 

Sample: https://codesandbox.io/s/vue-template-bo70t?file=/src/App.vue:6070-6357 

Kindly check the above sample and get back to us if you need any further assistance. 

Regards, 
Vengatesh

Sandra Bravo · Answer

Hi,It's working now.Thanks for all :) Regards.

Vengatesh Maniraj · Answer

Hi Sandra, 

Thanks for the update. 

We are happy that our solution has fulfilled your requirement. 

Regards, 
Vengatesh