Is it possible to implement a context menu which appears when users perform a right-click on an item of interest using the PopupControlExtender?
From investigations so far, it seems like the PopupControlExtender only works with left-clicks or the other choices are to write your own control or implement the entire solution in jQuery.
If it is possible to do a right-click with the PopupControlExtender, may I get some code examples?
Just have a hidden button on the form for the PopupControlExtender, then capture the right click and call document.getElementById('bla').click();
JS:
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
//alert('Left mouse button pressed');
break;
case 2:
//alert('Middle mouse button pressed');
break;
case 3:
document.getElementById('bla').click();
break;
default:
//alert('You have a strange mouse');
}
});
Markup:
<asp:button id="bla" runat="sever" style="display:none"/>
.....PopupControlExtender code...etc
Related
On LineDetails form we have tab page [Areas]. Under that tab page is button [Read Areas] . That button is redundant and there is no need for it, as that action which is occurred when clicked on it should be done when tab page [Areas] is opened.
[Control("Button")]
class ReadCommonAreas
{
void clicked()
{
ContractArea contractArea;
AmountMST sumContractArea;
super();
ContractLine_ds.readCommonAreas(ContractLine);
h1_h2.realValue(ContractLine_ds.h1_h2(ContractLine));
efa.realValue(ContractLine_ds.efa(ContractLine));
bfa.realValue(ContractLine_ds.bfa(ContractLine));
mfa.realValue(ContractLine_ds.mfa(ContractLine));
sumArea.realValue(h1_h2.realValue() + efa.realValue() + bfa.realValue() + mfa.realValue());
while select AreaSelector, sum(RentalValue)
from contractArea
group by AreaSelector
where contractArea.ContractId == Contract.ContractId
&& contractArea.RentalObjectId == ContractLine.RentalObjectId
{
sumContractArea += contractArea.RentalValue;
switch (contractArea.AreaSelector)
{
case AreaSelector::CommonAreaBuilding :
contractAreaBFA.realValue(contractArea.RentalValue);
break;
case AreaSelector::CommonAreaSection :
contractAreaEFA.realValue(contractArea.RentalValue);
break;
case AreaSelector::PrimaryArea, AreaSelector::SecondaryArea :
contractAreaH1_H2.realValue(contractArea.RentalValue);
break;
case AreaSelector::CommonAreaFixed :
contractAreaMFA.realValue(contractArea.RentalValue);
break;
}
}
contractAreaSum.realValue(sumContractArea);
}
}
How to adapt this, when is clicked on Areas to show info like when it's clicked on Read Areas ?
And after that, I will remove Read Areas button.
Just make the Read Areas button Visible = No to hide it.
Then on the Areas tab page, override the pageActivated() method and do ReadAreas.clicked(). That way the core code stays in tact.
The thing you should consider is if the user tabs off/on the Areas page, every time it will click the Read Areas button...not sure if that's a problem or not.
Use event handlers and the like where appropriate. This is just off the top of my head general approach.
I am working on a legacy asp.net web forms application. I am upgrading an existing form to have a new visual style, and to use parsley validation.
We previously used the webforms validation controls, but we upgraded to parsley, as it gives a nicer user experience, and allows the control being validated to be styled when validation fails (in our case, puts a red cross graphic as the background of the input box)
The form has an update panel, for postcode / address lookup. User enters their postcode, and clicks the "Find address" button, which triggers the postback within the update panel.. I've been able to separate the two form sections (main form validation, and just the postcode input) such that user is only prompted to complete the postcode when clicking "Find Address" (using data-parsley-group="postcode" on the input box and button). I added an onclient click event to the button, to trigger the validation before triggering the onClick event of the button. See below snippets.
<asp:ImageButton ID="addressLockup" runat="server" ImageUrl="/images/btn-find-address-off.gif" class="rollover" OnClientClick="return ValidatePostcode()" OnClick="Lookup_btn_Click" CausesValidation="false" data-parsley-group="postcode" />
function ValidatePostcode() {
console.log("do postcode validaiton");
if (true === $('#aspnetForm').parsley("postcode").validate("postcode", true)) {
return true;
}
return false;
}
Now, onto my issue:
As said before, it correctly validates that the postcode has been entered, showing the red cross only in the postcode input box if that validation fails.
However, once the postcode is correctly entered, and user clicks the button, it correctly triggers the onClick event, but at this point, all the other parsley validated input boxes that haven't get been correclt filled in, show the parsley-error state (showing the red cross in my case)..I've been able to clear these once postback is complete, but you briefly see the red crosses flash, which the client won't accept..
What can I do to prevent all the other form controls showing when OnClick event fires? I'm guessing it's because it's submitting the form at this point..
Thanks for reading,
Danny
I have found a workground for this, by changing the parsley-error style before the postback occurs, and then removing the parsley-error styles from all controls, changing back the parsley-error style once page reloads:
A bit hacky, but it works.. If someone has a better solution though, it would be great to hear it!
function ValidatePostcode() {
console.log("do postcode validaiton");
if (true === $('#aspnetForm').parsley("postcode").validate("postcode", true)) {
var style = '<style type="text/css">#accountRegisterContainer input.parsley-error {background: url(""); background-color: #ffffff;}#accountRegisterContainer select.parsley-error { background: url("") ;background-color: #ffffff;}</style>';
$("head").append(style);
return true;
}
return false;
}
function pageLoad(sender, args) {
$(".parsley-error").removeClass("parsley-error");
var style = '<style type="text/css">#accountRegisterContainer input.parsley-error {background: url("/Images/parsley-cross.png") no-repeat right 10px center;; background-color: #ffffff;}#accountRegisterContainer select.parsley-error { background: url("/Images/parsley-tick.png") no-repeat right 10px center;background-color: #ffffff;}</style>';
$("head").append(style);
}
I want all of the buttons in my asp.net web forms application to have UseSubmitBehavior="False" but I don't want to go through all my pages trying to hunt down each and every last button and set the property individually.
I am hoping there is a way to do this globally, for example in the web.config file. Thanks!
This is not a page property or something like that
this is a button property which allowes submit via __doPostBack
You Can't do this globally via web.config ( or in any other way).
The reason for wanting to set UseSubmitBehavior="False" is to stop the form from submitting when the user presses enter. If this is your goal then the following will interest you:
Another way to do this is to use JavaScript. This shifts the overhead of MikeSmithDev's suggestion to the client which might be more acceptable depending on your scenario.
Please note that the following JavaScript makes use of the jQuery library:
$(document).ready(function () {
preventSubmitOnEnter();
});
function preventSubmitOnEnter() {
$(window).keypress(function (e) {
if (e.which == 13) {
var $targ = $(e.target);
if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
return false;
}
}
});
}
Is there a way to have two or more open panes on an AJAX accordion control? The page will default to both panes open and user can close pane if desired.
According to the AJAX Control Toolkit description page:
The Accordion is a web control that allows you to provide multiple
panes and display them one at a time
So, no is the answer to your question. You could use Collapsible Panels, which is what the Accordion control is made up of. You can have multiple instances of those visible at one time.
Use the repeater control.
Inside repeater, use accordion.
I want opposite functionality, found out this while fixing someone's code.
First, you need to use this script:
function ToggleAccordionPane(paneno) {
$find('MyAccordion_AccordionExtender')._changeSelectedIndex(-1);
if( $find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display == "block") {
$find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display = "none";
$find('MyAccordion_AccordionExtender')._changeSelectedIndex(paneno);
}
else {
$find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display = "block";
}
return false;
}
Then, modify first header like this:
<Header>1. Accordion</Header>
For second and third pane:
<Header>2. AutoSize</Header>
<Header><a href="" class="accordionLink" onclick="ToggleAccordionPane(2);" >3. Control or Extender</a></Header>
Source:
http://www.c-sharpcorner.com/uploadfile/Zhenia/keeping-multiple-panes-open-in-accordion-web-control/
I have applied validation through JQuery Validation Plugin on my page. The validation works fine but once the Clear button is hit to clear out all the fields on the form, and then the save button is clicked again, the validation doesn't fire and the form gets submitted. I have called the following javascript function on click of Clear button to clear out all the form fields :-
function ResetForm() {
jQuery(':input', '#form1')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
return false;
}
The Clear button is on a ChildPage and ResetForm function is on the MasterPage. Anybody have any guess why its getting submitted after clearing the fields ?
input is an element and not a attribute or a pseudo selectable, the main issue I see in your code is the : within the :input
Try changing to jQuery('#form1 input') to fetch the list of inputs
Also change the not() command to select filter the inputs by type
.not('[type="button"], [type="submit"], [type="reset"], [type="hidden"]')
also as for :hidden there's several factors you should know about this.
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
In light of your comment please try this tested version:
function resetForm()
{
$("#form1").find(':input').each(function()
{
var jelem = $(this);
switch(this.type)
{
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
jelem.val('');
break;
case 'checkbox':
case 'radio':
jelem.attr('checked',false);
}
});
}
#source: http://www.electrictoolbox.com/jquery-clear-form/
Another way to do this is to create a hidden input in your form but set the type as reset like so:
<input type="reset" style="display:none" />
and then do:
function resetForm()
{
$("#form1[type='reset']").click();
}
Actually the error was something else, the code provided by RobertPitt is correct for clearing of form fields and my code was also correct for clearing of form fields. But the problem is that, on the clear button I had applied a class="cancel" so that the form should not get submitted because it was an aspx:button.
But according to what is written in JQuery docs, clicking of a button whose class is cancel should skip the validation, but after that if I click on a normal submit button validation should fire which was not firing in my case.
I just removed the cancel class and it worked.
Does this help?
Reseting the form when usering the jquery validations plugin