I have used schedule from PrimeFaces. How can I change the time format and button label?
As Primefaces used jquery FullCalendar like mentioned by #JasperDeVries in the answer in How to get the event when prev,next are clicked in p:schedule and PrimeFaces has extender functionality (also referred to in the same answer to a different issue) I was able to fix the time format issue with timeFormat="LT" also used extender="initSchedule" to change the button label.
<h:outputScript>
function initSchedule() {
// Configure fullCalendar
this.cfg.eventOrder = "-title"; // Sort descending order
this.cfg.buttonText = { today : 'Current Date'};
}
</h:outputScript>
Related
Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.
Now, before clicking anywhere else, click again on the text box as you did before.
This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.
I'm using mat-chip-list inside an outer *ngFor iterating over a FormArray.
Here is what I'have done. It's pretty efficient :
<input
#validatorInput
#operationTrigger="matAutocompleteTrigger"
[formControl]="contactCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(blur)="contactCtrl.setValue(''); validatorInput.value='';"
(click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">
The trick is
Always clear your html input and your (shared) formControl with an empty and not null value each time the blur and click events occur.
Do NOT do this 'clear' on the input focus event. (Because when you delete the last chip, the input is auto-focus and you will have the famous Expression has changed after it was checked.
Call operationTrigger.openPanel(); when the user click on the input
Setting contactCtrl.setValue(''); allows your autocomplete panel to be automatically opened when you call operationTrigger.openPanel()
Setting validatorInput.value=''; is just a way to properly sync your formControl with the html input to ensure a good UX/UI behavior.
Inside my formArray, the formControl is the same for all the inputs but it does not matter since the user can only manipulate one input at a given time
Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site.
But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.
// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
#ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...
ngAfterViewInit() {
fromEvent(this.fruitInput.nativeElement, 'click')
.pipe(
tap(() => {
this.trigger.openPanel()
})
).subscribe()
}
Link to the full stackblitz:
https://stackblitz.com/edit/angular-sb38ig
I have a primefaces autocomplete which is shown below:
<p:autoComplete value="#{consultaEventoCargoMBean.idUaSelecionada}" completeMethod="#{consultaEventoCargoMBean.completeUADestino}" var="ua" itemLabel="#{ua.name}" itemValue="#{ua.id}" forceSelection="false" appendTo="#this" />
Where idUaSelecionada and ua.id are Integer and ua.name is a String.
My issue is when I load my page to update the data. My idUaSelecionada is already filled and a object ready to be passed as suggestion (it would be a list of a only element). I was not able to find a way to fill this autocomplete - at least the text component.
Reading the Autocomplete souce code, I saw that there is a List called suggestions. Although there is not a setter for this list, it has a getter. But if I try something like autocomplete.getSuggestions().add(...) I get a NullPointerException. The only way I found to fill this list is through the method indicated by completeMethod tag attribute, who receives a String and returns a List.
I was not able to find in internet how to fill this List. That's why I am asking this to see if anyone has any answers.
Thanks,
Rafael Afonso
You can use JavaScript to trigger execution of method defined in completeMethod tag attribute and load suggestion(s).
Supposing that you want to do it when page loads, add this script to your page
<script>
function triggerSuggestionLoading() {
//finds autocomplete input text field
var autocomplete = document.getElementsByClassName('ui-autocomplete-input')[0];
//sets autocomplete query, for example
autocomplete.value="test";
//simulates key press triggering completeMethod to be executed
autocomplete.dispatchEvent(new Event('keydown'));
autocomplete.dispatchEvent(new Event('input'));
autocomplete.dispatchEvent(new Event('keyup'));
//sets focus on autocomplete
autocomplete.dispatchEvent(new Event('focus'));
//clears autocomplete text
autocomplete.value="";
}
window.onload = function() {
triggerSuggestionLoading();
};
</script>
Actually whenever you refresh your suggestion list and want to load suggestions into p:autocomplete just call triggerSuggestionLoading() method at the end (after all procedures are finished).
I've tested it in Chrome and Edge.
I think it has to do with how select2 creates the actual dropdown outside of the element it is based on.
Is there a way to suspend the cells "blur" activity until the user has made a selection, or in general just make the select2 more usable inside the kendo grid?
I hastily made this jsfiddle. I put the select2 inside the first column.
function testEditor(container, options) {
var customInput = $('<select name="' + options.field + '" data-text-field="text" data-value-field="id" />');
var scheduleContactSelect =
customInput
.appendTo(container)
.select2(
{
data: ["test1", "test2"]
});
}
http://jsfiddle.net/zaq3a3o5/
As you can see, the moment you start interacting with the select2, the cell closes edit mode but leaves the select2 hanging.
So it turned out the solution was three parts.
Use the "dropdownParent" select2 config option to make sure it appends the disconnected dropdown part inside the same element.
Make sure you are using Select2 4.03 or higher. (I had to upgrade to 4.03)
Define the "focusout" event while inside the "select2:open" event for the select2 search box so we can preventDefault() and stopPropagation() to prevent "focusout" from bubbling up.
I'm trying to update select2 model programmatically and for the view to refresh but it doesn't seem to work.
Here's a sample plunker forked from the Angular UI project: http://plnkr.co/edit/kQROgr?p=preview
I tried adding initSelection() accroding to select2 docs (http://ivaynberg.github.com/select2/ "Reacting to external value changes"), but that didn't work. I also tried with select2 3.3.2 and that didn't solve it either.
There are two issues:
1) Click "Update-Model", the model updates but it doesn't add a tag to the select2 widget. Also
2) Click "Update-Model" and then use select2 to pick a second tag, the first tag added by "Update-Model" disappears.
I know the question is a bit old but hey... I found it and didn't know the answer.
I managed to do what I wanted by setting up the model and then recalling initSelection() on the select2Options config
So my config was like so:
$scope.select2Options = {
allowClear: true
minimumInputLength: 3
quietMillis: 1000
initSelection: ->
$scope.property
query: (query)->
Properties.query({q: query.term}, (response)->
data = {results: processData(response['properties'])}
query.callback(data)
)
processData = (data)->
results = []
angular.forEach(data, (item, index)->
results.push(item)
)
return results
}
I then had my modal return the newly created object like so:
modalInstance.result.then((result)->
$scope.property = result
$scope.select2Options.initSelection()
)
Basically once it had updated the model I had to manually reinitialize the select2 widget. I think this could be handled with a $scope.$watch if you really wanted to but that would probably be a waste unless you have the property being updated from a few places or something.
Please note the remark mentioned WORKAROUND at the end of this question.
Based on a Dictionary based specification, one of my classes creates a Form programmatically.
Adding TextInput or DatePicker to FormItemss works as expected.
Unfortunately, the following code just creates a colored rectangle, not the actual picker:
ti = new ColorPicker();
ColorPicker( ti ).selectedColor = TAColor( _spec[ key ].value ).color;
and later on
formItem.addElement( ti );
The Form is embedded in a TitleWindow component presented using
PopUpManager.addPopUp(...);
When added to TitleWindow, it shows up correctly, within Form->FormItem not:
I can't image, why the picker doesn't appear. Do you?
WORKAROUND:
If I wrap the ColorPicker inside a Group things work:
ti = new Group();
Group( ti ).addElement( new ColorPicker() );
In this case, the ColorPicker appears as editable.
Still, I'd be too happy to learn what the problem with my initial solution. Bug?
A DateField (which extends ComboBase like ColorPicker) behaves properly in a spark Form. But in the ColorPicker, the mouse down handler of the button never gets called. I think that maybe the skin part that handles the mouse clicks (it must be a button) is not properly dimensionned, and the result is it is not shown. I've come to this conclusion because within an mx Form, the ColorPicker doesn't display as it does when it is added to the regular displaylist...
Hope this helps...
In the code you've provided, you never add the colorPicker as a child to any parent container; as such it will never show up anywhere.
You probably need to do something like:
formItem.addChild(ti );
[or for a Spark formItem]:
formItem.addElement(ti );
I'm confused as to why you're seeing a rectangle.