We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144713 May 18,2019 05:02 PM UTC May 23,2019 05:11 AM UTC Angular - EJ 2 7
loading
Tags: Grid
Csaba Együd
Asked On May 18, 2019 05:02 PM UTC

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 [Syncfusion]
Replied On May 20, 2019 12:17 PM UTC

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 
    }) 
  } 
} 




Regards, 
Thavasianand S.

Csaba Együd
Replied On May 20, 2019 12:33 PM UTC

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 [Syncfusion]
Replied On May 21, 2019 07:28 AM UTC

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 
    }) 
  } 
} 



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
Replied On May 21, 2019 09:36 AM UTC

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 [Syncfusion]
Replied On May 22, 2019 09:40 AM UTC

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)) 
  } 
} 



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

Regards, 
Thavasianand S. 


Csaba Együd
Replied On May 22, 2019 10:33 AM UTC

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 [Syncfusion]
Replied On May 23, 2019 05:11 AM UTC

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon