I'm using the Enterprise Ag-Grid version in my Angular 6 application. I have a Set Filter in it. I added the 'Apply' button to the filter:
apply: Set to true to include an 'Apply' button with the filter and
not filter automatically as the selection changes.
The question is how can I hide the mini filter menu after button is pressed? I didn't find any documentation about this possibility in the official web site. But I find a comment in the internal library src file, specifying in the IComponent.ts:
/* A hook to perform any necessary operation just after the gui for this component has been renderer
in the screen.
If the filter popup is closed and reopened, this method is called each time the filter is shown.
This is useful for any
logic that requires attachment before executing, such as putting focus on a particular DOM
element. The params has one callback method 'hidePopup', which you can call at any later
point to hide the popup - good if you have an 'Apply' button and you want to hide the popup
after it is pressed. */
afterGuiAttached?(params?: IAfterGuiAttachedParams): void;
At the moment I can not understand how to set afterGuiAttached function to achieve the goal described above.
Could anyone help me?
Thanks in advance!
As you already checked afterGuiAttached is a part of Filter Component
So this function accessible inside custom filter like here.
So all that you should do is define afterGuiAttached inside:
export class PartialMatchFilter implements IFilterAngularComp {
afterGuiAttached(params){
params.hidePopup() <- executing will close the filter
}
}
afterGuiAttached - would be executed on init as described (but Apply button also would be custom and you should handle it by your self). You can bind hidePopup function to your custom filter parameter and use it when it would be necessary.
export class PartialMatchFilter implements IFilterAngularComp {
private hideFilter:Function;
afterGuiAttached(params){
this.hideFilter = params.hidePopup;
}
}
Executing this.hideFilter() will close your filter;
I've made a dummy sample based on the referenced demo
Related
I've been searching non-stop for this on the documentation but haven't been able to find any sort of information. I would like to know how to add checkboxes in my custom view container, similar to the breakpoints' checkboxes.
You can simulate the checkbox by playing with the icon, create a new TreeItem with a different icon when clicked.
Somehow they have knowledge on where on the TreeItem you click.
Looking with the dev tools, it is an <input type="checkbox"/>.
This means that you can do more with TreeItems than the docs explain.
Looking at the source code the BreakpointView is not implemented with a TreeItemProvider, it extends the ViewPane class and uses some kind of templates to render an item. Beside a checkbox it is also possible to have a combobox (SelectBox class).
I have added a feature request (101175) to extend the vscode API so extension developers can write Views with ViewItems that have additional UI-Elements like the Breakpoint view.
You can do this in the proposed api: treeItemCheckbox in Insiders v1.72 now and since it is a fairly simple new api I suspect it will be released with Stable 1.72.
You can play with this now, see using the proposed apis.
Instead of extending TreeItem you will extend TreeItem2 (which extends TreeItem) if you want to use checkboxes. Here is some sample code I put together:
export class TreeTab extends vscode.TreeItem2 {
...
if (tab.isActive) {
this.iconPath = new vscode.ThemeIcon("arrow-small-right", new vscode.ThemeColor("tab.unfocusedActiveBackground"));
this.checkboxState = vscode.TreeItemCheckboxState.Checked;
// this.checkboxState = {state: vscode.TreeItemCheckboxState.Checked, tooltip: "my nifty checkbox tooltip"};
}
...
and elsewhere in your code if you want to detect when that checkbox is clicked/unclicked:
// use your TreeView variable instead of 'tabView'
// from this.tabView = vscode.window.createTreeView(...);
const checkBoxListener = this.tabView.onDidChangeCheckboxState(async event => {
// event = {item: Array(n)}, which TreeItem's checkbox was clicked and its state after clicking:0/1 = on/off
console.log(event);
});
I'm using page fragments to create a view and in the same page I have two forms to view / update specific information.
What I want know if it's possible to disable one form (or button, since it's the way I use to change from readable to updatable) based on if the other is in updatable mode.
Simplifying I have form A and B, both in the same page as readable. When I select A to update I want B to disable the option to edit until A is back to read mode, and the same to B form.
Can anyone help me?
---Update
Flows
A
B
In each fragment (view) I have a button that as an action to the fragment (edit)
What I need is to disable the button from B.view when A button is pressed and vice versa
If the forms are part of separate taskflows and these taskflows are used on the page as regions, then you will need to enable inter-region communication, so that an action in one region can affect the data and behavior of other region:
http://www.oracle.com/technetwork/developer-tools/adf/adfregioninteraction-155145.html
For your use case, contextual events can serve the purpose:
http://rohanwalia.blogspot.com/2013/07/contextual-events-basic-step-by-step.html
http://www.awasthiashish.com/2013/05/using-contextual-event-in-oracle-adf.html
https://blogs.oracle.com/raghuyadav/entry/refresh_bounded_taskflows_acro
To implement your case, follow the tutorials provided above with following changes:
Pass a boolean value in the customPayLoad of event
<event name="DisableButtonEvent" customPayLoad="${'true'}"/>
In the event handler method assign the payLoad value to a scope variable:
public void handleDisableButtonEvent(String payLoad) {
AdfFacesContext adfFacesContext = AdfFacesContext.getCurrentInstance();
Map pageFlowScope = adfFacesContext.getPageFlowScope();
pageFlowScope.put("disableButton", payLoad);
}
Use the scope variable for disabled property of button on second region
<af:commandButton text="EditButoonB" id="cb1"
disabled="#{pageFlowScope.disableButton ne null? pageFlowScope.disableButton : false}"/>
OOTB Tag has multi select functionality, Is it possible to create single select Tag in Touch UI? If yes, can you point me which js file I need to modify?
The cq:tags property is rendered by CUI.TagList widget that can be found within /etc/clientlibs/granite/coralui2/js/coral.js script.
Reading it you can learn that the widget raises itemadded event which might be helpful for you to handle the singular tag handling. An example function that can catch the event might be placed in any clientlibs that will be attached to the admin interface such as cq.authoring.dialog clientlib.
$('*[data-fieldname="./cq:tags"]').on('itemadded', function(ev, value) {
var el = $(ev.target),
div = el.siblings('div'),
input = div.find('input'),
button = div.find('button');
input.prop('disabled', true);
button.remove();
}
To have the fully functional flow you need to handle the itemremoved event as well and make the input field enabled again as well as add the button back to the widget.
Pretty straight-forward question, but I can't find this anywhere. I'm using WicketStuff's TinyMCE to make a Rich Text Editor in my application, and can't find anywhere how to get the input from the text area. For brevity's sake, the following is a simplified version of the code I'm using.
private String input;
...
TinyMCESettings settings = new TinyMCESettings(TinyMCESettings.Theme.simple);
TextArea<String> textArea = new TextArea<String>("editor", new PropertyModel<String>(this, "input"));
textArea.add(new TinyMceBehavior(settings));
form.add(textArea);
Using this, I would expect the usual manner to simply use my String 'input' since it's set as the model. This always results in null as the model isn't being updated.
I tried using the auto-save plugin in case it was expecting the save button to be clicked (which doesn't update the model either), and neither worked. The only thing I've been able to do to get the user's input is to add a HiddenField, with a new model, and make a JavaScript call like
document.getElementById('hiddenField').value = tinyMCE.get('editor').getContent();
but this has led to other problems with trying to call the JS in the desired place and to get it to work properly. I feel this shouldn't be necessary anyways, as surely someone must have implemented a method to get the contents of the text area being used.
Any help would be greatly appreciated.
Thanks to a blog post at Nevermind Solutions, the way to get the model updated is to add the following JavaScript to the form's submitting button:
onclick="tinyMCE.triggerSave(true,true);"
My text area is inside a panel with the button outside of the panel, so it doesn't directly work for me. The trick was to add the JavaScript call to the button's onSubmit, move the logic into the onAfterSubmit, and to make the button MultiPart so that it could call the save trigger before doing the other logic associated to the model.
Hope this might help some others in the future.
You have to add a modifier to the submit button so that the model can update.
AjaxButton btnSubmit = new AjaxButton("btnSubmit", new Model()) {
#Override
public void onSubmit(AjaxRequestTarget target, Form<?> form) {
doSomething();
}
};
btnSubmit.add(new TinyMceAjaxSubmitModifier());
Have a look here for more info
I have a window with a search form at the top and grid at the bottom.
User can enter values in the search form and click button - Get Records.
At the click of this button, I load the store of the grid by passing the values in form fields as parameters in following way:
store.load({
params:{
key1:Ext.getCmp('field1').getValue();
}
});
I tried giving parameters in the store proxy itself, but it unfortunately always takes up initial values (values when the form is rendered) and not the latest one entered by the users in the form fields. Following is the method I used for assigning values to params while creating the store:
extraParams:{
key1:Ext.getCmp('field1').getValue();
}
I wanted to seek guidance at two things:
a. While defining a store, can I ensure that store takes latest/current values from the form fields before querying server, so that I don't have to provide these values while calling load function?
This becomes more necessary as I have a paging toolbar at the bottom which carries a refresh button (along with next, last, previous, first icons for navigation).
Now, whenever user clicks at refresh (or any navigation icon), the store gets loaded without the query parameters.
Thus the second thing is:
b. If the answer of 'a' is that - Pass the latest values to parameters manually when calling load function - then how can I write the handler for 'refresh' button and navigation icons (that is, next, last, previous and first) in the paging toolbar, so that I can pass the latest form values to load function.
Thanks for any help in advance.
PS: I am using ExtJS 4.
yourStore.on('beforeload',function(store, operation,eOpts){
operation.params={
status:cmbStatus.getValue(),
value:txtBuscarPor.getValue(),
empresa:'saasd',
app:'dsads'
};
},this);
Related to your question (b) (and because you especially asked for this in the comments section):
I see only one standard way to hook into the PagingToolbar button handlers which is very limited.
Ext.toolbar.Paging fires a 'beforechange' event before it actually changes the current page. See API docs. A listener that returns false will stop the page change.
All other methods require extending Ext classes which wouldn't be a problem if the ComboBox would make it easier to use your own implementation of BoundList (which is the class that renders the dropdown) or pass through config parameters to BoundList resp. the paging toolbar.
I tried to bring this lack of flexibility up on the Ext message board once but was pretty much ignored.
A possible solution for this is to use 'beforeload' event of the store and provide the list of parameters in it. This way, whenever the store is loaded, then its beforeload event is fired and the values picked up are always the latest. Hope this helps someone looking for something similar.