Having trouble getting help?
Contact Support
Contact Support
Read all values of Dialog on button click
4 Apr 20227 minutes to read
You can read the dialog element values by binding the action handler to the footer buttons. The buttons
property provides the options to bind events to the action buttons. For detailed information about buttons, refer to the footer
section. In the below sample, value of input elements within the dialog has been checked in the footer button click event and send the values as the content of confirmation dialog.
<div class="col-lg-12 control-section" id="target">
<ejs-button id="normalbtn" content="Open"></ejs-button>
<ejs-dialog id="dialog" width="400px" target="#target"
showCloseIcon="true" header="User Details">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.DialogButtons" click="submitButtonClick"></e-dialog-dialogbutton>
</e-dialog-buttons>
<e-dialog-animationsettings effect="Zoom"></e-dialog-animationsettings>
<e-content-template>
<form>
<div class='form-group'><label for='name'>Name:</label><input type='name' value='' class='form-control' id='name'></div>
<div class='form-group'><label for='email'>Email Id:</label><input type='email' value='user@syncfusion.com' class='form-control' id='email'></div>
<div class='form-group'><label for='contact'>Contact Number:</label><input type='contact' class='form-control' id='contact'></div>
<div class='form-group'><label for='address'>Address:</label><textarea class='form-control' rows='5' id='address'></textarea></div>
</form>
</e-content-template>
</ejs-dialog>
<ejs-dialog id="modal_dialog" width="400px" target="#target" showCloseIcon="true" visible="false" isModal="true" header="User Details">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.SubmitButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
<e-dialog-dialogbutton buttonModel="ViewBag.SubmitButtons2" click="returnClick"></e-dialog-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script>
document.getElementById('normalbtn').onclick = function () {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.show();
};
function dlgButtonClick() {
var dialogObj = document.getElementById('modal_dialog').ej2_instances[0];
dialogObj.hide();
}
function returnClick() {
var dialogObj = document.getElementById('modal_dialog').ej2_instances[0];
dialogObj.hide();
var dialogObj1 = document.getElementById('dialog').ej2_instances[0];
dialogObj1.show();
}
function submitButtonClick() {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.hide();
var dialogObj1 = document.getElementById('modal_dialog').ej2_instances[0];
dialogObj1.content = getDynamicContent();
dialogObj1.show();
}
function getDynamicContent() {
var input = document.getElementById('dialog').querySelector('#name');
var email = document.getElementById('dialog').querySelector('#email');
var contact = document.getElementById('dialog').querySelector('#contact');
var address = document.getElementById('dialog').querySelector('#address');
var template = "<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><b>Confirm your details</b></div>" +
"</div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='name'> Name: </span>" +
"</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='nameValue'>" + input.value + "</span> </div></div>" +
"<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='email'> Email: </span>" +
"</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='emailValue'>" + email.value +
"</span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>" +
"<span id='Contact'> Contact number: </span></div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>" +
"<span id='contactValue'>" + contact.value + " </span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>" +
"<span id='Address'> Address: </span> </div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='AddressValue'>" + address.value + "</span></div></div>"
return template;
}
</script>
<style>
.control-section {
padding-left: 10px;
}
#target {
height: 100%;
min-height: 350px;
}
#modal_dialog {
margin: 20px;
}
.row {
padding: 10px 3px;
}
</style>
public class HomeController : Controller
{
public class ButtonModel
{
public string content { get; set; }
public bool isPrimary { get; set; }
}
// GET: RTL
public ActionResult Index()
{
ViewBag.DialogButtons = new ButtonModel() { isPrimary = true, content = "Submit" };
ViewBag.SubmitButtons1 = new ButtonModel() { content = "YES", isPrimary = true };
ViewBag.SubmitButtons2 = new ButtonModel() { content = "NO" };
return View();
}
}