I'm currently trying to do UI that allow me to enter hotkeys for different table rows...
So main idea is to make something like editableCell, where i will input hotkeys.
I already found getKeyComboString method from docs:
http://blueprintjs.com/docs/#core/components/hotkeys.key-combos
But my problem is: how i make something like EditableCell double click ?
i looked in source and found, that editableCell uses Draggable component for this (as i can say), but i can't import it.
so i don't know how should i check if my input looses focus...
Any ideas how to make hotkey input ?
I'v done this using onBlur event and isEditing state.
<div
className={className}
onDoubleClick={this.handleCellDoubleClick}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
tabIndex={0}
>
{this.state.keyCombo}
</div>
onDoubleClick set state to isEditing: true
onBlur set it to false
onKeyDown works only when isEditing: true
Related
I am trying to hide my SAVE vanilla button according to form state. when the form state != create the vanilla button should not display. I tried different things but nothing works:
I create a function in js that returns true if form is create state
function isHideState(){
formstate = Xrm.Page.ui.getFormType();
if(formstate == formType.create){
return true;}
else{
return false;}
}
I added a disply rule and connected it to my command that relevant to the js function :
my rule is : FormStateRule and state: Create
I connected my command to my vanilla button and yet it display even if the form is'nt in create state.
Am I missing something? it's been hours.. guidance someone?
UPDATE: to be more specific - I need the button to be seen only on create mode.
We do not need to use JavaScript here, instead of Display rule, please use Enable/Disable rule and apply the FormState rule.
Please see below image
Note: Whenever you are customizing the vanilla button (OOB Save button in your case), Make sure to start by right click the button in Ribbon workbench & click customize button/command to “retain” the OOB behavior & add your customizations on top of it.
Change this line
if(formstate = formType.create){
into
if(formstate == formType.create){
Single = is for assignment; double = is for comparison.
Update:
RibbonDiffXml follows/expects this structure in command:
<CommandDefinition
Id="String">
<EnableRules />
<DisplayRules />
<Actions />
</CommandDefinition>
There’s no direct property for rules in Button; only command can be linked.
<Button Alt="String"
Command="String"
CommandType=["General" | "OptionSelection" | "IgnoredByMenu" ]
CommandValueId="String"
Description="String"
Id="String"
Image16by16="String"
Image16by16Class="String"
Image16by16Left="Non Positive Integer"
Image16by16Top="Non Positive Integer"
Image32by32="String"
Image32by32Class="String"
Image32by32Left="String"
Image32by32Top="String"
LabelCss="String"
LabelText="String"
MenuItemId="String"
ModernCommandType=[ "ControlCommand"| "System"]
ModernImage=”String”
Sequence="1"
TemplateAlias="String"
ToolTipDescription="String"
ToolTipHelpKeyWord="String"
ToolTipImage32by32="String"
ToolTipImage32by32Class="String"
ToolTipImage32by32Left="Non Positive Integer"
ToolTipImage32by32Top="Non Positive Integer"
ToolTipShortcutKey="String"
ToolTipTitle="String"
/>
After 2013, commandbar introduction changed the behavior of Enable rule similar to Display rule. Disabled buttons using Enable rule will hide the button to utilize the space for other buttons in command bar (as there are always limitation like 7 or 9 buttons in command bar unlike Ribbon).
Enabling buttons again will act like show/hide once switched (similar to Display rule). Probably you can follow this blogpost to achieve yours.
An important thing to remember is to add the enable rule(s) to the command. This is commonly missed, someone creates an enable rule but forgets to add it to the button command.
If you forget to add enable rules to the command then the button will show on all states/stages of the form. If you forget to add the command to the button, then the button will not show up on the form.
In the ribbon editor, you can add Display and Enable rules. You can check the form type with no code. Look at this video:
https://www.youtube.com/watch?v=xyLzEAW0CJs
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 am currently developing an app using angular2 and typescript.
I need to use a range slider input to send a control and i need to know when the input is being used, ie when the user is dragging it.
I tried using a combination of the "mouseup" and "mousedown" event.
When you click the slider the "mousedown" event is triggered and the "isActive" variable is set to true, then when the user stops using the slider the "mouseup" event is triggered and the "isActive" variable is set to false.
<input type="range" (mousedown)="isActive = true" (mouseup)="isActive = false" />
That part works perfectly but the fact that I set up an action to do on the "mouseup" event looks to overwrite a native action and the slider is never released.
Here is a simple plunker showing the behavior : https://plnkr.co/edit/PJqFp7dFREog9rE7Shdx
Is it me that do not implement a necessary function to make this work ? or is it a "bug" from angular2 that does not propagate events and just overwrites them ?
Thank you in advance.
https://plnkr.co/edit/KMmJVMhbnmdjVha92S5S?p=preview
I made your code work with wrapping your isActive assignations in method.
Take a look at the plnkr.
The reason why the behaviour differ is because when you do
isActive = true
It returns true, and continue the event bubbling.
And when you do
isActive = false
It returns false, and prevent event from bubbling.
I found a way to make this works. I add a $event.propagate() in the "mouseup" event like this :
<input type="range" (mousedown)="isActive = true" (mouseup)="isActive = false;$event.propagate();" />
But is normal that i have to do that for it to work correctly ? should not the event be propagated automaticaly by angular2 ?
Knockout has the default behavior of updating the associated model if you change your focus (e.g. by clicking outside the input control) after editing the value inside an input control, populated by a binding of type Value.
Here is the link to the official documentation page explanation, section Parameters:
http://knockoutjs.com/documentation/value-binding.html
Do you know a way to disable this default behavior ?
The reason behind this : Im using Models that can tell if their last update requires persistent backup by comparing the previous value to the new one.
I would like to listen to the key up event on my form inputs but if I do that, knockout triggers twice event (the default one + the key up) to update the Model and the second one is basically telling my Model to replace the value by the same value because it is already updated, which it translates to "there is no need to do persistent backup since the value didnt change".
I would gladly appreciate any help or suggestion, since Im stuck and can't find a way around :)
EDIT
Couldnt reproduce the error with bare backbone code. It seems as "super cool" said that valueUpdate should override the default Blur event that triggers when you use form controls with binding Value.
It may be a bug introduced by the library Knockback that I use to create the ViewModel.
Despite all this, just replacing the binding Value by the binding textInput did the trick. Thank you all.
Don't listen to the event, subscribe to updates, which won't fire unless the value is changed. Using the textInput binding will register every change to the value, even those done using menu items like cut and paste, when they happen.
Equivalently, you can use the value binding along with valueUpdate: 'input'
vm = {
myvar: ko.observable(),
updates: ko.observableArray()
};
vm.myvar.subscribe(function(newValue) {
vm.updates.push(newValue);
});
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="textInput: myvar" />
<div data-bind="foreach: updates">
<div data-bind="text: $data"></div>
</div>
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.