Having trouble getting help?
Contact Support
Contact Support
Prevent the focus on the first element
4 Apr 20223 minutes to read
By default, the dialog focuses on the first elements of the content area which can be active and focusable. You can prevent this default focusing behavior using the open
event and by enabling the preventFocus
argument.
Bind the open event and enable the preventFocus argument within an event like the below example.
<div id='container' style="height:400px;">
<ejs-button id="targetButton" content="Open Dialog"></ejs-button>
<ejs-dialog id="dialog" header="Sign In" open="onOpen" target="#container" width="300px">
<e-content-template>
<div class='wrap'>
<div class='form-group'><label for='email'>Email:</label>
<input type='email' class='form-control' id='email'>
</div>
<div class='form-group'>
<label for='comment'>Password:</label>
<input type='password' class='form-control' id='password'>
</div>
</div>
</e-content-template>
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
<e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
</div>
<script>
document.getElementById('targetButton').onclick = function () {
var dialog = document.getElementById("dialog").ej2_instances[0];
dialog.show();
}
function dlgButtonClick() {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.hide();
}
function onOpen() {
args.preventFocus = true;
}
</script>
public class HomeController : Controller
{
public class ButtonModel
{
public string content { get; set; }
public bool isPrimary { get; set; }
}
public ActionResult Index()
{
ViewBag.DialogButtons1 = new ButtonModel() { isPrimary = true, content = "Ok" };
ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel" };
return View();
}
}