I'm working on an application which uses a List and some itemRenderers. I have a button displayed in the "selected" state automatically set by the List component. This button is supposed to dispatch a custom event when clicked. Problem is, I don't know how to add my event listener, and I don't want to use 'click=""' because it's kinda dirty IMHO.
/
If it was a SkinnableContainer, I could override the partAdded() but I couldn't find anything similar in the ItemRenderer or the DataRenderer.
Any hints?
Thanks !
You may use the button creationComplete event to add the listener.
Or, for complex itemRenderers I usually create my own that extends SkinnableComponent and implements IDataRenderer. You can then override partAdded/partRemoved functions. Note that you will also need to define and support the skin states (hovered, selected...).
Related
I have a sap.m.TabContainer control with multiple sap.m.TabContainerItem controls. Each of the TabContainerItem controls have a number of their own controls on them. I have created a custom control (DBPanel) with a label and text field. It also has an enabled property for which I have overridden the setEnabled(boolean) method to enable/disable the internal text field within DBPanel. There are five (5) of these DBPanel controls on a specific TabContainerItem. When I call setEnabled(true) on each of these DBPanels, only three of the five become enabled. When I switch to another TabContainerItem and then back to this one, the final two DBPanels are also enabled. It is almost as if the TabContainerItem needs to be re-rendered. But I have read elsewhere that if rerender or invalidate need to be specifically called then there is something wrong with the code.
Any help would be appreciated.
Thank you
At your overridden method, you can try to call the original method that is extended. If you don't need extra logic rather than disabling or enabling it, you don't need to extend that method but I guess you have some.
First check whether superclass implements the method and then call the
method with the original arguments
if (DBPanel.prototype.setEnabled)
DBPanel.prototype.setEnabled.apply(this, arguments);
I am using the sortable component from the Kendo UI Angular 2 library to create a list of custom components which the user can drag and drop to rearrange as they need. By default, the sortable's items can be dragged by clicking anywhere within the item. My question is: can we specify a handle like we would in the classic Kendo UI? I want the user to drag the item only when using the header of the item, not the body.
I could not find anything in the documentation and I was hoping that if anyone had done it they can point me in the right direction.
Thanks.
Without access to the TypeScript source code (only have access to the transpiled JavaScript), it's hard to tell, but based on my quick examination the answer is no. It doesn't support options like the Kendo UI JavaScript version does where you can specify a handle selector.
If you have a handle element, according to the docs, you're supposed to add the draggable="true" attribute to your element in the Sortable's template.
See http://www.telerik.com/kendo-angular-ui/components/sortable/#toc-known-limitations
<kendo-sortable [data]="items">
<ng-template let-item="item">
<button draggable="true">
{{item}}
</button>
</ng-template>
</kendo-sortable>
My experience with this Kendo Angular component is it's not that great. I have my own open issue with it. It doesn't seem to work well outside a narrow scope.
For now, at least in my project, we'll be using Dragula. There is an Angular2+ wrapper for it available. It does support handles and such in its options.
https://github.com/valor-software/ng2-dragula
I know it has been years since this original question was asked, but as of this writing, Kendo still does not support a "handle" mechanism natively. There is, however, a way to implement the "handle" feature, which I will write here in hopes that someone in the future may find this helpful. Note I don't believe this is the right solution, because I believe Kendo's API should have this feature.
Using a Mouse
Prevent Drag Start
When we start to drag on the widget, we only want dragging to occur if our mouse is over a valid handle.
Define a flag in your component's code.
/** whether we should allow dragging **/
allowDrag: boolean = false;
Listen for dragStart on the kendo-sortable element
<kendo-sortable (dragStart)="onDragStart($event)">
Stop the default dragStart event when the flag is true
/** handles the starting of dragging */
onDragStart(e: DragStartEvent): void {
if (!this.allowDrag) {
e.preventDefault();
return;
}
}
Toggle on mouseover and mouseleave
When your mouse is over the handle element, enable the flag. When your mouse leaves the element, disable the flag.
<div (mouseover)="allowDrag = true" (mouseleave)="allowDrag = false" class="drag-handle"></div>
Incorporating Touchscreen Users
The philosophy of the above approach relies on only listening for the mouseover and mouseleave events on the handle, and ignoring everything else. For mobile - it's a bit trickier, because there isn't a mouse-position that specifically defines whether a user in position to make a drag. So, we have to add a listener to handle elements, as well as to all other non-handle elements we don't want dragging on. This approach could have been employed for mouse clicks as well, though I believe only attaching to the handle elements is the better approach.
Note: I haven't fully tested this approach yet, and it may not be suitable in all conditions, and may not work as expected for all users.
Add the touchstart Event
In your view, listen for touching the handle
<div (touchstart)="allowDrag = true" (mouseover)="allowDrag = true"
(mouseleave)="allowDrag = false" class="drag-handle"></div>
Also including touching all things that aren't handles
<div (touchstart)="allowDrag = false">
My non-draggable thing
</div>
I'm playing with actions in Ember and I see that some people use targets that point to their controllers or their views like such:
{{action saveNote target="view"}
However, I also see that Ember supports event bubbling much like the DOM, in that events will work their way up to the application controller and router.
Is there a reason for specifying either "view" or "controller"? If I understand it correctly, the view/controller that the template's action belongs to will be the first in line to receive the event, so why specify it?
There's really no reason to target the controller, since it's the default target. Events not handled by the controller will bubble up from the controller to the routes.
However, if you want the view to respond to an action, you'll need to target it explicitly.
target="controller' is not needed ( anymore? )
target="view" can have many uses which are perhaps local to a specific view instead of belonging into a controller. Like toggling the display of an item.
But target also has other use cases like if you want to target a controller you have declared in needs which is then accessible in controllers.<nameOfController>
When would be an appropriate time to delegate events with GWT using:
void com.google.gwt.user.client.ui.Widget.delegateEvent
Usually events dispatched by browser bubble up the node so I can't think of the reason why you would need to manually delegate the events.
A real use case would be great.
Thanks.
parent.delegateEvent(child, event) is actually the same as child.fireEvent(event).
fireEvent was originally a protected method so delegateEvent was added to expose it publicly (issue 3263), then fireEvent was made public as part of another change
It has nothing to do with the event delegation pattern.
Event delegation is especially useful in effects like dropdown menus, where lots of events on links may take place that can easily be handled at the root level (an or in this case).
Just go through the blog just written by . #Chris Heilmann and #Dan Webb with a use case demo
In my winforms app, I have a UserControl that contains a DataGridView. I instantiate and load this UserControl when needed into a panel in my Main Form (frmMain). My problem is figuring out how to resond to or listen for events raised in my UC's DataGridView. For example, I want to handle the CellDoubleClick event of the DataGridView in my Main Form rather than through the UC.
Is this possible? I had thought of updating a property when the cell in the grid is double-clicked, and then let my Main form do whatever when that property changes - therefore I thought of using INotifyPropertyChanged. Im not heavily clued up on how to use it in m scenario however, and would deeply appreciate some help in this regard, or if anyone can suggest an alternate solution.
Much thanx!
Your user control must encapsulate some logic, so if you want to handle event of the DataGridView that is in your control the way you've described, you probably missing something in idea of user controls and encapsulation. Technically here two ways to do this:
Make a public property in your user control of type DataGridView.
Make an event wrapper. You will need to create an event in your user control that is raised when DataGridView CellDoubleClick (or any) is rased and in your calling code you will handle this event wrapper.
The second approach is more logical, cos internal logic of your control is incapsulated and you can provide end-user of you component with more logical and meaningful event then CellDoubleClidk or else.
thank u 4 your reply. Sorry for not responding earlier. I did manage to sort this issue out by creating a public event in my UC:
public event DataGridViewCellEventHandler GridRowDoubleClick {
add { dgvTasks.CellDoubleClick += value; }
remove { dgvTasks.CellDoubleClick -= value; }
}
and in my main form, after I instantiate and load the UC
_ucTask.GridRowDoubleClick += new DataGridViewCellEventHandler(TasksGrid_CellDoubleClick);
with the following attached event:
private void TasksGrid_CellDoubleClick( object sender, DataGridViewCellEventArgs e ) {
// do work here!
}
This does work, although I don't know if any of u experts out there foresee a problem with this approach.