Copy field values (e.g. address) to other fields inside edit dialog

[Csaba Együd]

Hi,

Is there any way to add a button to the edit dialog (that is not bound to any fields or columns) and use it to copy a series of fields, like company address (country, zip, city, address) to another set of fields, like invoicing address (country, zip, city, address)? 

Thank you,

Csaba

[Thavasianand Sankaranarayanan]

Hi Csaba, 

Greetings from Syncfusion support. 

Query: Is there any way to add a button to the edit dialog  

 

Yes, we have an option to customize the edit dialog in Grid. In the below sample, we have created a new button and append to edit dialog footer element. Please refer the below code example and sample for more information. You can also customize the edit dialog as per your requirement. 

<ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' (actionComplete)='actionComplete($event)' [toolbar]='toolbar'> 

    <e-columns> 

         . . . . . . 

    </e-columns> 

</ejs-grid> 

actionComplete(args){ 

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

    let button = document.createElement('button'); 

    button.setAttribute('class', 'e-control e-btn e-lib e-flat'); 

    button.setAttribute('cssClass', 'e-flat'); 

    button.innerHTML = 'Copy'; 

    args.dialog.element.querySelector('.e-footer-content').append(button); 

    button.addEventListener('click', function (e) { 

      alert("custom button")  // you customize as per your need 

    }) 

  } 

} 

Sample : https://stackblitz.com/edit/angular-e3j5ja?file=app.component.html 

Help documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/customize-the-edit-dialog/ 

Regards, 

Thavasianand S.

[Csaba Együd]

Hi Thavasianand,

Thanks for the sample. It looks good, and makes sense for me, but I meant to add a custom button between the fields in the dialog. 

E.g. in the dialog 

...

Company Address:   __________

 

[Invoicing address is the same as company address] <--- button among edit boxes

Invoicing Address: __________

[Postal address is the same as company address] <--- button among edit boxes

Postal Address:    __________

...

I would use the buttons to copy edit values in the open Dialog (during edit) from one field to the other. 

Your example shows a nice way to bind the click event to the button, but how can I position it to the correct place in the dialog? 

Thank you so much!

Best,

-- Csaba

[Thavasianand Sankaranarayanan]

Hi Csaba, 

Thanks for your update. 

As per your requirement we have modified the sample and insert the button between the fields in edit dialog. Please refer the below code example and updated sample for more information. 

actionComplete(args) { 

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

    var button = document.createElement('button'); 

    button.setAttribute('class', 'e-control e-btn e-lib e-flat'); 

    button.setAttribute('cssClass', 'e-flat'); 

    button.innerHTML = 'Copy'; 

    button.innerHTML = 'Copy'; 

    button.type="button"; // need to apply type as button to prevent page reload 

    // insert the button before the ship country field 

     #gridShipCountry' => grid id+ field name 

    args.dialog.element.getElementsByTagName('tbody')[0].insertBefore(button, args.dialog.element.querySelector('#gridShipCountry').closest('tr')) 

    button.addEventListener('click', function (e) { 

      alert("custom button") // you can do as per your requirement 

    }) 

  } 

} 

Sample : https://stackblitz.com/edit/angular-e3j5ja-rp7pfe?file=app.component.ts 

Note: In this sample, we have insert the button inside the form element so make sure whether you are specify the button types as button because default type as submit so it reload the page when click the button. 

Regards, 

Thavasianand S. 

[Csaba Együd]

Hi Thavasianand,

This is working beautifully, thank you. 

Now I have another problem with copy.ing the values Normal inputs are working well, but the country dropdown (select) does not save the manually set value to the model. For the country field I have two elements in the form: icountryid and icountryid_hidden. 

I tried to set icountryid only, then icountryid_hidden only, then both. But no success, my value is not persisted after save. 

BTW, setting icountryid sets the target dropdown to the correct value, but does not save it to the model. 

Here is my click event on the button. 

button.addEventListener('click', function (e) {

    event.dialog.element.querySelector(`#${this2.custGrid.element.id}icountryid`).value =

        event.dialog.element.querySelector(`#${this2.custGrid.element.id}ccountryid`).value;

    event.dialog.element.querySelector(`#${this2.custGrid.element.id}icountryid_hidden`).value = 

        event.dialog.element.querySelector(`#${this2.custGrid.element.id}ccountryid_hidden`).value;

    event.dialog.element.querySelector(`#${this2.custGrid.element.id}iCity`).value = 

        event.dialog.element.querySelector(`#${this2.custGrid.element.id}cCity`).value;

    event.dialog.element.querySelector(`#${this2.custGrid.element.id}iAddress`).value = 

        event.dialog.element.querySelector(`#${this2.custGrid.element.id}cAddress`).value;

    event.dialog.element.querySelector(`#${this2.custGrid.element.id}iZip`).value = 

        event.dialog.element.querySelector(`#${this2.custGrid.element.id}cZip`).value;

});

Could you tell me what I do wrong here? 

Thank you so much.

-- Csaba

[Thavasianand Sankaranarayanan]

Hi Csaba, 

Thanks for your update. 

Query: Normal inputs are working well, but the country dropdown (select) does not save the manually set value to the model.  

 

We have validated the provided information. By default, while using dropdown then it’s necessary to assign the value for both dataSource  and value property of dropdown. We suggest you to use the below way to achieve your requirement.  

Please refer the below code example and sample for more information. 

actionComplete(args) { 

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

    . . . . . 

    button.addEventListener('click', function (e) { 

      // get dropdown instance and assign ShipCountry value to dataSource and value property of country dropdown 

      dialog.element.querySelector('#gridCountry').ej2_instances[0].dataSource = [{ 'Country': dialog.element.querySelector('#gridShipCountry').value }]; 

      dialog.element.querySelector('#gridCountry').ej2_instances[0].value = dialog.element.querySelector('#gridShipCountry').value; 

    }.bind(this)) 

  } 

} 

Sample : https://stackblitz.com/edit/angular-e3j5ja-truzfz?file=app.component.ts 

Please get back to us if you need further assistance on this. 

Regards, 

Thavasianand S. 

[Csaba Együd]

Hi Thavasianand,

Thank you for the update. You pointed me to the correct direction, but I slightly modified the example because your example overwrote the target dropdown's data source, while I just wanted to set the selected item id. 

So I changed it to this: 

event.dialog.element.querySelector(`#${this2.custGrid.element.id}icountryid`).ej2_instances[0].value = event.dialog.element.querySelector(`#${this2.custGrid.element.id}ccountryid`).ej2_instances[0].value;

And it is now persisted to the DB as well. 

Thank you very much. 

-- Csaba

[Thavasianand Sankaranarayanan]

Hi Csaba, 

 

We are happy that the problem has been solved. 

 

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

                          

Regards, 

Thavasianand S.