I'm Having a hard time Coding and Trying different approaches on how to catch the tab and Shift+tab when Modal Window is open , It loses focus and Jumps to Text box at the background ,
Can someone Help me with this situation. Thanks
editwindow = $("#modalWindow").kendoWindow({
title: "Edit Person Information",
modal: true,
visible: false,
resizable: false,
width: 600
}).data("kendoWindow");
Then
<div id="modalWindow" class="main">
#using (Html.BeginForm("Edit", "People", FormMethod.Post, new { id = "PeopleForm" }))
Use this example
$("#modalWindow").kendoWindow({
close: onClose,
**activate: onActivate**
});
function onActivate(e) {
var windowElement = this.wrapper,
windowContent = this.element;
$(document).on("keydown.kendoWindow", function(e) {
var focusedElement = $(document.activeElement);
if (e.keyCode == kendo.keys.TAB && focusedElement.closest(windowElement).length == 0) {
windowContent.focus();
}
});
}
Check This
I tried other workarounds unsuccessfully. The solution we're using now follows (this is in our global keydown event handler). Note - we're ignoring tabindex values here - simply identifying 1st and last :input elements.
if (key == kendo.keys.TAB) {
var $currentOpenWindow = $(".k-window:visible"); // test if there is a window that is currently displayed
var $inputElements = $currentOpenWindow.find(":input"); // includes buttons
// if a dialog is currently displayed, don't allow the user to tab out of the dialog into the base form. Per Casey on 1/2016, we don't need to support nested dialogs.
if ($currentOpenWindow.length > 0 && $inputElements.length > 0) {
Utility.log(1, "Enforcing tab within displayed window $currentOpenWindow.length:", $currentOpenWindow.length);
var isValid = true;
if (e.shiftKey) {
if (document.activeElement == $inputElements[0])
isValid = false;
}
else {
if (document.activeElement == $inputElements[$inputElements.length-1])
isValid = false;
}
if (!isValid) { // Cancel the tab key - this will prevent the browser from changing focus to any other element
e.stopImmediatePropagation();
e.preventDefault();
return false;
}
}
}
Related
Simplified version
ParentWindow.ShowDialog()
Click default/Bring Up Child Window button in ParentWindow
Click event handler for default/Bring Up Child Window button does ParentWindow.Hide()
ChildWindow.ShowDialog()
Click ChildWindow's cancel/Go Back button
ParentWindow.Visibility = Visibility.Visible
ParentWindow is nowhere to be found.
I checked, and ParentWindow returns true for IsInitialized, IsLoaded, and IsVisible. I also Alt-Tabbed my way through all my windows to look for it - it's not hiding under anything.
Why can't I see ParentWindow anywhere?
Full version
parseSettingsWindow.ShowDialog()
Click default/Bring Up Fix Selector button in parseSettingsWindow
Click event handler for default/Bring Up Fix Selector button does:
a. ParentWindow.Hide()
b. parseSettingsWindow.GoToNextWindow flag set to true (Next window is Fix Selector)
while loop does fixSelector.ShowDialog() because it's not yet loaded
Click ChildWindow's cancel/Go Back button
while loop is entered again, goes to `case "Parse Settings" section
parseSettingsWindow.Visibility = Visibility.Visible
parseSettingsWindow is nowhere to be found
I checked, and parseSettingsWindow returns true for IsInitialized, IsLoaded, and IsVisible in the Immediate Window when pausing execution on the break; line of the "Parse Settings" while loop section. I also Alt-Tabbed my way through all my windows to look for it - it's not hiding under anything.
Why can't I see parseSettingsWindow anywhere?
Main class
public static bool UserPromptedSettingsWereWrittenToModel(ref Model model, ref ActiveFixes activeFixes, ref ActiveReports activeReports)
{
var viewModel = new ViewModel();
var parseSettingsWindow = new ViewPlusViewModel.ParseSettings();
parseSettingsWindow.InitializeComponent();
var fixSelector = new ViewPlusViewModel.FixSelector(viewModel);
fixSelector.InitializeComponent();
var seeAllFixesReports = new ViewPlusViewModel.SeeAllFixesReports();
seeAllFixesReports.InitializeComponent();
parseSettingsWindow.ShowDialog();
var nextWindowToOpen = "Fix Selector";
while (parseSettingsWindow.GoToNextWindow == true && fixSelector.GoToNextWindow == false)
{
switch(nextWindowToOpen)
{
case "Fix Selector":
if (fixSelector.IsLoaded)
{
fixSelector.Visibility = Visibility.Visible;
}
else
{
fixSelector.ShowDialog();
}
nextWindowToOpen = "Parse Settings";
break;
case "Parse Settings":
parseSettingsWindow.GoToNextWindow = false;
parseSettingsWindow.Visibility = Visibility.Visible;
nextWindowToOpen = "Fix Selector";
break;
}
}
if (parseSettingsWindow.GoToNextWindow == false)
{
parseSettingsWindow.Close();
if (fixSelector.IsLoaded) fixSelector.Close();
if (seeAllFixesReports.IsLoaded) { seeAllFixesReports.Close(); }
return false;
}
parseSettingsWindow.Close();
fixSelector.Close();
if (seeAllFixesReports.IsLoaded) { seeAllFixesReports.Close(); }
return true;
}
ParseSettingsWindow.cs
private void GoToNextWindow_Click(object sender, RoutedEventArgs e)
{
this.GoToNextWindow = true;
this.Hide();
}
You can't bring a hidden .ShowDialog() window back again via Window.Visibility. You need to use .ShowDialog() on it again. In addition, any buttons given the IsCancel = True property will no longer have that functionality even when using ShowDialog() again, so presses on that button will need to be handled manually.
The function i have called in jquery for add and update the record
$.post("/Project/ProjectManagement", { PrjDetails: JSON.stringify(PrjObj) }, function (Data) {
var result = JSON.parse(JSON.stringify(Data));
if (result.status == true) {
GetAllProjects();
var dialog = bootbox.dialog({
title: '<h4 style="color:white">Project Management and Tracking System</h4>',
message: '<p style="font-weight:700;">' + result.message + '</p>',
buttons: {
success: {
className: 'shadow mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent pull-left',
label: "OK"
}
}
});
$('#ProjList').modal('hide');
// window.location.href = '/Project/ProjectManagement';
}
else {
bootbox.alert("Error");
}
})
}
after click on edit button and save changes, i give the bootbox.dialog and when i click ok l got black screen with disabled touch.
when i check in developer options it is due to modal.backdrop.in opacity with.5
When i searching for this error i got the solution and i answered my question
after click on ok button of bootbox.dialog and i hiding that modal by $('#modalid').modal('hide'); and i hide the backdrop by using this jquery snippet $('.modal-backdrop').fadeOut(400);
and my error is solved...
In a form, I have a spin edit control like this:
formLayoutSettings.Items.Add(i =>
{
i.FieldName = "FieldA";
i.NestedExtension().SpinEdit(s =>
{
s.Properties.MinValue = 1;
s.Properties.MaxValue = 9999999999999;
s.Properties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithTooltip;
s.Properties.ClientInstanceName = "seFieldA";
s.Properties.Increment = 10;
s.ShowModelErrors = true;
s.Width = Unit.Percentage(100);
s.Properties.AllowMouseWheel = false;
s.Properties.ClientSideEvents.KeyDown = "OnFieldAKeyDown"; // This is the event heandeler
});
});
And the function:
function OnFieldAKeyDown(s, e) {
if (e.htmlEvent.keyCode == 38 || e.htmlEvent.keyCode == 40) {
ASPxClientUtils.PreventEventAndBubble(e.htmlEvent); // this doesn't work
ASPxClientUtils.PreventEvent(e.htmlEvent); // this either
}
}
My aim is to prevent the spin edit control value from changing when the user presses the Up key or Down keys. When I debug this, the if test inside the OnFieldAKeyDown works but PreventEventAndBubble and PreventEvent fails miserably. Also, is there any other way to do this with jquery ??
Thanks.
AFAIK, there is a workaround to prevent a user incrementing/decrementing SpinEdit value using up/down arrow keys without using PreventEvent or PreventEventAndBubble. When there's no public method available on JS side, you can try restore SpinEdit previous value in KeyDown event handler like this:
<script type="text/javascript">
function OnFieldAKeyDown(s, e) {
if (e.htmlEvent.keyCode == 38 || e.htmlEvent.keyCode == 40) {
// check if ASPxClientSpinEdit exists
if (typeof ASPxClientSpinEdit !== "undefined") {
ASPxClientSpinEdit.prototype.OnPageOrArrowKeyDown = function() {
// when user tries either increment or decrement, it returns last value instead
if (s.GetValue() != s.lastChangedValue) {
s.SetValue(s.lastChangedValue);
}
// if spinedit's minimum & maximum values also affected, set current limit
else {
s.maxValue = ASPxClientSpinEdit.MaxValue;
s.minValue = ASPxClientSpinEdit.MinValue;
}
}
}
}
}
</script>
Combine this function with jQuery may possible, any suggestions welcome.
Reference: https://www.devexpress.com/Support/Center/Question/Details/Q254514
I have a textbox in web form(asp.net). when user already keyin data, then they will press Enter key, so that the data will be update to database.
Is there any way possible to perform this?
function InitTextBox() {
//var _txt = $('#<%= txt.ClientID%>'); or
var _txt = $('input:[id*="txtId"]');
if (_txt.length < 1) return;
_txt.get(0).autocomplete = 'off';
_txt.on('keydown', function (evt) {
var _self = $(this);
event = evt ? evt : window.event;
if (event.keyCode == 13) {
if ($.browser.msie)
{ event.cancelBubble = true; event.returnValue = false; }
else { event.preventDefault(); }
if (_self.val().length > 0 && _self.val().match(/^\s*$/) == null)
__doPostBack(_self.attr('name'), '');
}
});
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTextBox);
And set autopostback for textbox to false, please
Dino Esposito had wrote about this a while back. You wouldn't necessarily need a custom control, but can use his JavaScript.
If you have a control wrapped around a Panel, and you have the DefaultButtonID property set, the panel will trigger a postback on enter too by clicking the desired button specified by the ID. That's another way.
I want to disable clicking and going from one tabPanel to another. Like here http://www.eldan.co.il/en/ the user can't select another step. I tried something like this
if (Tabs.ActiveTabIndex == 0)
{
Tabs.Tabs[1].Enabled = false;
}
but it hides the tab...
I found something that helped me.
...prevent switching to the tab on click depending on form validation
Returning false in the tabs select handler prevents the clicked tab from becoming selected.
$('#example').tabs({
select: function(event, ui) {
var isValid = ... // form validation returning true or false
return isValid;
}
});