You can add an icons to the dialog buttons using the buttons
property or footerTemplate
property . For detailed information about dialog buttons, refer to the documentation section.
In the following sample, dialog footer buttons are customized with icons using buttons
property.
<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" Content="Are you sure you want to permanently delete all of these items?"
showCloseIcon="true" header="Delete Multiple Items">
<e-dialog-animationsettings effect="Zoom"></e-dialog-animationsettings>
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.DefaultButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
<e-dialog-dialogbutton buttonModel="ViewBag.DefaultButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
</div>
<style>
.control-section {
padding-left: 10px;
}
.control-section {
padding-left: 10px;
}
#target {
height: 100%;
min-height: 350px;
}
.e-ok-icon::before {
content: '\e7ff';
}
.e-close-icon::before {
content: '\e825';
}
</style>
<script>
document.getElementById('normalbtn').onclick = function () {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.show();
};
function dlgButtonClick() {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.hide();
}
</script>
public class HomeController : Controller
{
public class ButtonModel
{
public string content { get; set; }
public bool isPrimary { get; set; }
public string iconCss { get; set; }
}
public ActionResult Index()
{
ViewBag.DefaultButtons1 = new ButtonModel() { content = "YES", isPrimary = true, iconCss = "e-icons e-ok-icon" };
ViewBag.DefaultButtons2 = new ButtonModel() { content = "NO", iconCss = "e-icons e-close-icon" };
return View();
}
}
Output be like the below.
In the following sample, dialog footer buttons are customized with icons using footerTemplate
property.
<div class="col-lg-12 control-section" id="target">
<ejs-button id="normalbtn" content="Open"></ejs-button>
<ejs-dialog id="dialog" created="onLoad" width="400px" target="#target" Content="Are you sure you want to permanently delete all of these items?"
showCloseIcon="true" header="Delete Multiple Items" footerTemplate="<div><button id='Button1' class='e-control e-btn e-primary e-flat' data-ripple='true'><span class='e-btn-icon e-icons e-ok-icon e-icon-left'></span>Yes</button><button id='Button2' class='e-control e-btn e-flat' data-ripple='true'><span class='e-btn-icon e-icons e-close-icon e-icon-left'></span>No</button></div>">
<e-dialog-animationsettings effect="Zoom"></e-dialog-animationsettings>
</ejs-dialog>
</div>
<style>
.control-section {
padding-left: 10px;
}
.control-section {
padding-left: 10px;
}
#target {
height: 100%;
min-height: 350px;
}
.e-ok-icon::before {
content: '\e7ff';
}
.e-close-icon::before {
content: '\e825';
}
</style>
<script>
var dialogObj;
document.getElementById('normalbtn').onclick = function () {
dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.show();
};
function onLoad() {
dialogObj = document.getElementById('dialog').ej2_instances[0];
document.getElementById('Button1').onclick = function () {
dialogObj.hide();
};
document.getElementById('Button2').onclick = function () {
dialogObj.hide();
};
}
</script>
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
Output be like the below.