I am trying to implement multiple select on ComboBox with check boxes in flex 4.1. By default the combo box closes after every select, is there any way to override that default function?
1) // is there any way to override that default function?
In combobox the open/close of the popupList was handled by DropDownController.as in DropDownListBase.as i hope u can override closeDropDown method to prevent close.But ensure you need to handle the close when click outside the combobox.
override public function closeDropDown(commit:Boolean):void
{
// your logic goes here
// call super if needed to close
//super.closeDropDown(commit);
}
For preventing the default behavior You can also use the below methods on close event (or ItemClick event if it has one)
event.preventDefault();
which Cancels an event's default behavior if that behavior can be canceled.
event.stopPropagation();
which Prevents processing of any event listeners in nodes subsequent to the current node in the event flow.
There are lot of flex example out there for combobox with checkbox itemrenderer before u post any question in stackOverflow do a Google search.
I hope this will help you
https://code.google.com/p/combocheck/source/browse/#svn%2Ftrunk
http://www.flexicious.com/home/FlexMultiSelectComboBox
Related
Polymer 1.*
I have a custom element that has a form. In addition, there is a few event listeners and custom handlers that I have states for in different parts of the form.
When a user submits the form, I can just do reset() on the form. But this doesn't reset the states inside the handlers I have for my custom logic.
After a user submits the form, I element needs to reset to it's default values. The cleanest way to do this is to destroy the template and re-stamp it. I don't want to have to manually code and reset each object property/variable state.
I can not use <template is="dom-if" if="{{condition}}" reset> because that can only be used in a nested template...which means states/variables/objects persist for the parent template.
Is there a way I can destroy a template and restamp it? Performance hit is not a issue here.
what i suggest you to do is to wrap your form with custom element. so for example you create element called my-form and put iron-form and all inputs inside it. inside your my-form element you will need to propagate events to parent propably, which isn't problem, since there is fire() function you can call in my-form and addEventListener in parent element.
So in my-form you will listening to iron-form onSubmit then call this.fire("formSubmitted"); and in parent element inside (for example) ready function:
this.addEventListener("formSubmitted", function() {
Polymer.dom(this.root).removeChild(this.$$("my-form"));
Polymer.dom(this.root).appendChild(document.createElement("my-form");
}.bind(this));
and that's it. I hope i understand your question right.
When the parent component is loaded, I give textarea a default value, and I want to the textarea automatically adjust it's height with the value. The code is followed:
protected function commentContentGroup_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
userCommentContent.addEventListener(KeyboardEvent.KEY_DOWN, sendInfor);
scrollerContentHieght=20;
commentContentGroupHeight=this.height;
userCommentContent.addEventListener(TextEvent.TEXT_INPUT, userCommentContent_textInputHandler);
userCommentContent.addEventListener(TextOperationEvent.CHANGE, userCommentContent_changeHandler);
// userCommentContent.addEventListener(TextEvent.TEXT_INPUT,userCommentContent_changeHandler);
this.userCommentContent.text = "The Object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget";
}
I think the CHANGE event is not triggered.
If you want to assign height every time the component is displayed (added to display list) then you can use Event.ADDED_TO_STAGE. If you want it only once then creation complete should be sufficient. If you need more help please paste your complete code.
Normally, forms and pop Ups don't have the focus set when they are just displayed. The obvious solution was to set the focus to the first input in the creation complete event of the component, so the keyboard short Cuts like tab and space start working.
The problem is that, creation complete is not the panacea, sometimes the element is not focus-able at that point, and i am not sure why that happens.
The render event would ensure the focus, but it dispatches too much for a very simple purpose.
In which point a component is always ready to be focus-able?
Edit: The component giving me trouble to get start up focus, is a TitleWindow, which can be poped in 2 ways, a Mouse click event and a keyboard event.
When the tite window is displayed by a click, the first input gets focus in the creation complete event, but when displayed by a keyboard event, it doesnt...
By now i got it working with the following code:
private function titlewindow_creationCompleteHandler(e:FlexEvent):void{
callLater( setTextInputFocus);
}
private function setTextInputFocus():void{
txtPregunta.setFocus();
}
But doubt the way is shown has anything to do with this... because, some other TitleWindow are displayed this way too and they're fine.
So what could it be?
The render event would ensure the focus, but it dispatches too much for a very simple purpose.
If this is true then why not try this:
private function titlewindow_creationCompleteHandler(e:FlexEvent):void{
var callback : Function = function(re : Event) : void {
titlewindow.removeEventHandler(RenderEvent.orsomething, callback);
setTextInputFocus();
};
titlewindow.addEventHandler(RenderEvent.orsomething, callback);
}
Might be kind of a hack since it should be focusable on creationComplete but it would probably work.
I have 'Back Board' on my images and content over here: http://syndex.me
So basically, you click on an image, it will overlay a info panel above the clicked content.
I want to do two things:
Click on the background of the site to fade out the currently opened info panel
Be able to click on a tag, link, or social icon within the info panel without triggering it's parent function, which is too fade out again.
I cannot use stopPropagation for the child click being superseded by the parent click as i need the click events to be handled by .live() (see documentation) This is due to the fact that posts are being dynamically loaded.
I cannot just say something like:
$("#Background").click(function(){//fade out the Info Board}
Because that is being covered by the entire post wrapper, and i can't put an event ont hat because then I'm even deeper in the dilemma of parents taking over children's events :-)
So far I'm at least able to have just one infoboard open (i.e I click on one image, then another, it will close the already opened one, and open the current one. So this part is all good:
$('.theContent:not(.clicked)').live("click", function () {
$(this).children('.postInfo').fadeIn(400);
$(".clicked").each(function() {
$(this).find('.postInfo').fadeOut(400);
$(this).removeClass('clicked');
});
$(this).addClass("clicked");
});
$('.clicked').live("click", function () {
$(".clicked").each(function() {
$(this).find('.postInfo').fadeOut(400);
$(this).removeClass('clicked');
});
});
Re .live(), .delegate() and .stopPropogation():
Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.
How about simply checking whether the event actually took place on the specific element:
function activate(el) {
el.find('.postInfo').fadeIn(400);
el.addClass('clicked');
}
function deactivate(el) {
el.find('.postInfo').fadeOut(400);
el.removeClass('clicked');
}
$('.theContent:not(.clicked)').live('click', function(e) {
deactivate($('.clicked'));
activate($(this));
});
$('.clicked').live("click", function(e) {
if (! $(e.target).is('a')) {
// this should not trigger if a click occured on one of the links
deactivate($(this));
}
});
$('#ape').click(function(e) {
if ($(e.target).is('#ape')) {
deactivate($('.clicked'));
}
});
Have you thought about binding the click event when the post is dynamically loaded? This way you can use stopPropagation().
http://jsfiddle.net/rkw79/CzEj5/
If you bind the event to a parent element, it won't stop its propagation event to it's childrens.
You have two solutions, to bind an event to every children and put THERE the stop propagation call, or just test who ired the click event in the parent. I prsonaly find more elegant the second solution.
You can read something more about it here :
http://redfishmemories.blogspot.it/2014/08/jquery-prevent-event-propagation-and.html
I am adding a right click functionality on individual nodes of a treeView in my C# code.
The options like "Add", "Delete", "Rename" should pop up when the user right clicks in those nodes on the tree. Now depending on the node that is being clicked, I am filling up the menu as using the following statememnts:
contextMenuStrip1.Items.Add("Add");
Then if a different nodes is right clicked I use the following:
contextMenuStrip1.Items.Add("Rename");
There are some nodes where both the items have to be shown:
contextMenuStrip1.Items.Add("Add");
contextMenuStrip1.Items.Add("Delete");
How do I write seperate event handlers for Add and Delete when both of them exist in the context menustrip. I am not able to differentiate whether "Add" or "Delete" was clicked. Currently I am using the "ItemClicked" event on the ContextMenuStrip to execute my piece of code in the event handler for "Add" but this evemt also gets raised when "Delete" is clicked. Any help would be appreciated.
Thanks,
Viren
Instantiate your context menu strip. In that you will add your three ToolstripMenuItems. Each toolstrip menu item will have it's own OnClick method. Change the visibility property of an item depending on what your context requires.