So I have created a context box upon right click that has Add/Edit/Delete Rows. I also have a bunch of code launched before the Dialog is shown. My problem is that when I use the context menu it doesn't go through some of the code. I have tried to call on the functions directly but it doesn't format correctly.
I am mainly concerned with the edit button, here is the code I am using to bring up the edit Dialog
function editRow() {
var grid = jQuery("#<%= Jqgrid1.ClientID %>");
var rowKey = grid.getGridParam("selrow");
if (rowKey) {
// I have tried calling functions here and it still doesn't work
grid.editGridRow(rowKey, grid.editDialogOptions);
}
else {
alert("No rows are selected");
}
}
So if I use this to display the editform it isn't formatted correctly nor does it go through the functions all correctly.
I am using the ASP Webforms version of Jqgrid so I call the function by doing this
<cc1:JQGrid1 ID="Jqgrid1
//other attributes
ClientSideEvents-BeforeEditDialogShown="ChangeMonitor"
//Rest of code />
So this works just fine, and I'm trying to get the Edit button on the context menu to display correctly.
My thought was to use Jquery to trigger a click on the actual Edit button once someone used the context menu. I couldn't find an ID that would work however.
Is there an easy way to connect my context menu Edit button, with the actual Edit button in the toolbar?
Well I found a solution to my problem.
The id field of the button was edit_ct100_cpMainContent_Jqgrid1_top so I just triggered a click with this code.
$("td[id^=edit][id$=top]").trigger("click")
For some reason when I used the _ct100_cpMainContent_Jqgrid1 it wasn't working, but now it does. Hope this helps someone.
Related
I am getting crazy with a problem that I found when executing a Visual Studio Coded UI Test.
The scenario is as follows.
I recorded a Coded UI Tests that do the following steps in a Web Application (Microsoft Dynamics CRM 2011):
Login into an application
Navigate into a page
On the page set the selected value of a html combobox
The test is able to do all those steps without a problem, even selecting the value in the combobox.
The web application have a piece of Javascript that is executed when the selected item changes.
if one of the values is selected then an alert message is presented to the user and the application will set the selected item to a default one!
The javascript code look like this:
switch (Xrm.Page.getAttribute("status").getValue()) {
case 3: //Authorised
alert("Please use the method XPTO to update the record status to Authorised!");
Xrm.Page.getAttribute("status").setValue(1);
Xrm.Page.getControl("tatus").setFocus(true);
return false;
The UI Test method that is performing the change in the combobox is as follows:
/// <summary>
/// Select a value in the Status dropdown box
/// </summary>
public void SelectStatus()
{
#region Variable Declarations
HtmlComboBox uIStatusComboBox = this.UIHttpsappWindow200.UIModuleUITEDocument5.UIWorkplaceDashboardsFrame.UIModuleUITEDocument.UIStatusComboBox;
// Select 'Authorised' in 'Status' combo box
uIStatusComboBox.SelectedItem = this.SelectStatus_SPParams.UIStatusComboBoxSelectedItem;
}
The test method is able to change the value in the combobox, and an alert message is displayed to the user. However this part of the code uIStatusComboBox.SelectedItem = this.SelectStatus_SPParams.UIStatusComboBoxSelectedItem;
never returns and the test just hangs there until it timeouts!
I have no ideia how to work arround this issue! I was thinking that maybe the problem could be in the fact that we have javascript code that is executed after the alert is displayed to the user. I changed the JS so that the alert message is the last thing to be displayed but it also didn´t help!
I also noticed that if I click Ok on the alert message the test Pass!
If I select other value that dont trigger any JS the test also Pass!
Does anyone have any idea about this issue?
Edit 1:
I noticed another thing, I can use the BrowserWindow object to send a JS script to the browser. If I try to create an alert message the call also gets blocked until I click on the Ok button, on the alert!
BrowserWindow bw = BrowserWindow.Locate("My window");
bw.ExecuteScript("alert('This is just a simple alert.');");
The ExecuteScript statement also gets blocked until I click on the OK button!
This seems very very strange!
I believe I have found a workaround.
I was googling to find anything that could help me with this issue and I end up finding this question on StackOverflow Coded ui test - Select an item from a combobox without using mouse coordinates
I try to select the same item in the Dropdown without using the "SelectedItem" property of the HtmlComboBox element.
I try to use the keyboard to select the element in the dropdown box, first I click on the Dropdown and then I use the Down key and Enter key to select the element that I want:
public void SelectStatus_SP(string SelectedItem)
{
#region Variable Declarations
HtmlComboBox uIStatusComboBox = this.UIHttpsappWindow200.UIpopupUITEDocument5.UIWorkplaceDashboardsFrame.UIpopupUITEDocument.UIStatusComboBox;
#endregion
Mouse.Click(uIStatusComboBox);
Keyboard.SendKeys(uIStatusComboBox, "{Down}{Down}{Enter}", ModifierKeys.None);
}
In my case the element that I want to select is the 3rd one, so I go down 2 times and then hit enter on the element I want to select.
This workaround is not so good because if the element changes position I will select the worng one! But this was the only way I got for the test not to be stock in that part!
I wonder if anyone had a similar issue. Because to me this seems like a bug in the Coded UI Test engine, It doesn´t make any scence for the test to be stocked while the alert is not closed!
I have 2 select controls. One change event updates the other. Also, it updates a grid inside update panel.
On page load, I call an ajax method to get the drop down values for both select. I populate the control and trigger a button click event which then updates the grid inside the update panel.
Everything works fine in all browsers, except in Firefox. Any idea as to why this might be happening?
Upon using break point i discovered that in other browsers the server side method is called first and then the ajax method while in Firefox its the other way around.
I narrowed down the issue to when using EndRequestHandler. I use EndRequestHandler event to change the class for a control. I remove that functionality and its perfect. The code for it is below:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler()
{
var type = $('[id$=ddlType]').val();
$('a[data-categoryid="' + type + '"').parent().addClass('selected');
}
Finally, there was a typo in my code. I forgot the closing square bracket in the EndRequestHandler. Surprisingly, the other browsers didn't care about it!
Updated code.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler()
{
var type = $('[id$=ddlType]').val();
$('a[data-categoryid="' + type + '"]').parent().addClass('selected');
}
I have used CKEDITOR.appendTo( "my_div" , null , my_string ) to create an instance of ckeditor ... no problem.
however, the LINK button opens a non-interactive LINK dialog box.
So, is there some config setting that it supposed to be manually set to true, perhaps?
EDIT 1 ... I will explain what I meant by non-interactive LINK dialog box ...
When I click the ckeditor's LINK button (the one that looks like a chain-link), it opens a LINK dialog box which has a input field for me to enter a URL, plus a pulldown to choose protocol, plus a couple of other form elements.
However, none of these are use-able ... if I try to type in the url input field, nothing happens (the field will not accept focus); likewise the pulldowns do not open if I click them.
EDIT 2 ... added screenshot
When the modal option is set to true for the dialog, the dialog blocks any interaction with elements outside of it. (https://github.com/jquery/jquery-ui/blob/master/ui/dialog.js#L818)
You can override this to allow interaction with elements inside ckeditor.
Just include this somewhere after jquery ui and it should work:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
If you want to allow interaction with any element outside of the dialog, include this instead:
$.ui.dialog.prototype._allowInteraction = function(event) {
return true;
};
Add this:
$(document).on('focusin', function(e) {e.stopImmediatePropagation();});
I was using:
jquery-1.8.2
jquery-ui-1.10.3
ckeditor 4.3.1
then I replaced: jquery-ui-1.10.3 with: jquery-ui-1.9.0 and it seems to work as expected.
If reverting back to jquery-ui 1.9 is not good for you, also look at:
jquery-ui forum ... "can't edit fields of CKEditor in jQuery UI modal dialog"
jquery-ui bugs ... "Dialog: CKEditor in Modal Dialog is not editable"
I'm having difficulty trapping a programmatically triggered click event on a hidden button control from a ASP.NET MVC 4 web app inside a VB6 thick client (which is using a web browser control). I'm able to trap the click event itself using the following:
Private WithEvents WebDoc As HTMLDocument
Private Function WebDoc_onclick() As Boolean
Select Case WebDoc.activeElement.iD
Case "A"
Do something
Case "C"
Do something else
End Select
WebDoc_onclick = True
End Function
And this works just fine if the control is visible. But if the control is invisible:
<div class="HideBtnDiv">
<input id="C" name="NoItems" type="button" class="BtnDiv" style="display:none"/>
</div>
and I try to trigger a programmatic click via one of the following:
$("#C").('click');
$("#C").trigger('click');
$("#C").triggerhandler("click");
$("#C").focus();
$("#C").trigger('click');
I'm getting an empty string for the "id" attribute and as a result I can't distinguish which button was clicked. This button serves no purpose other than to indicate to the VB6 app that a certain criteria has been met and that's the reason why I need it to be hidden. Does anyone have any idea why the id is getting stripped? Or is there any other way to communicate back to the client?
I've also tried filtering by element style using
Select Case WebDoc.activeElement.Style
Case "display:none"
Do something else
End Select
but it came back as "[Object]" so no luck there either. Please let me know if there is a way around this.
Thanks,
Lijin
You seem to have tried several ways of dynamically triggering the click event, but did you try the most obvious way:
$("#C").click();
???
But here is what I would do:
1- Make all of your buttons visible, by removing "display:none" from their style
2- Wrap the buttons you want to hide in a new DIV
3- Set "display:none" style in the newly created DIV
4- You can then trigger the .click() event of any button even if not visible by calling $(id).click();
Thanks, Ahmad. Actually I meant .click() not .('click'). Sorry about that.
Anyway, I tried your suggestion and made the button visible and set the style of the wrapping div to display:none but the id attribute was still coming through as an empty string.
However, I did figure out another way to get this to work. If I keep the wrapping div and button as visible and then focus and click when the condition is met and then do a hide(), my problem is resolved!
$("#C").focus();
$("#C").trigger('click');
$("#C").hide();
The button doesn't get displayed and VB6 still passes the id on the click event. The weird thing is it requires the focus() call to still be made. Without it, I'm back to square one. Not sure if this is a bug.
I have an ASP.NET DropDownList control that renders into a dropdown list (select HTML tag) on a page. For some reason, when I'm in Internet Explorer, it requires two clicks for me to open it up and see the options, which is just an extra click for the end-user. It works fine in Google Chrome, Mozilla Firefox and Safari--I only have to click once to see the options for a selection. Why would it not work correctly in IE? And more importantly, how can I fix it in IE?
Here is my code:
<asp:DropDownList id="DDLClientName" runat="server" EnableViewState="False" AutoPostBack="True" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)">
Had to remove the hard-coded onfocus event. IE handles the first click for the focus event, and the second to expand the dropdown. I guess this is a known quirk with IE along with the other 400+ quirks.
I am still trying to figure out a way to change styles of the dropdown on focus. Depending on what code you put into this callback anonymous function, you may still need to click the dropdown twice in IE. I've found that you can monkey with other controls, inside this function and it doesn't require two clicks. I'll keep this as the answer for now. I guess because of Microsoft we can't use the onfocus at all on dropdowns. I may try using an actual select tag rather than using Microsoft's ASP.NET DropDownList, and see if I can use the onfocus event then, without the extra click. I doubt it.
jQuery(this.Elements.DDLClientName).focus(function() {
.. put code here
});
I had this same problem and this is due to how IE 10 handles onFocus, it treats the first focus as a click. What I did to fix it was bind the mousedown event to the click event. Then, you can run whatever code you need in the click event.
// if IE 10
if (navigator.userAgent.indexOf("MSIE 10") > 0)
{
$("#InvoiceTypeDropDown").bind('mousedown',function(event) {
$(this).trigger('click')
});
}
So my complete code looked like this:
if (navigator.userAgent.indexOf("MSIE 10") > 0)
{
$("#InvoiceTypeDropDown").bind('mousedown',function(event) {
$(this).trigger('click')
});
$("#InvoiceTypeDropDown").click(function () {
if ($(this).val() == '') {
$(this).css("color", "black");
$(this).css("font-style", "normal");
}
});
}