I have 2 combo boxes and 1 input text field. On change of the 1st combo I set some value in the input field and partial refresh the panel where the input field is.
OnComplete of this refresh, i partial refresh (using XSP partialRefreshPost) the panel of the 2nd combo box. This combo box value as you can see is just the 1st combo's value.
The problem is:
The combo value is set but the input value is not! Although input's panel refresh comes first and on complete comes the combo's panel refresh. If i remove the code from inside the 2nd combo's value tab then the input field works. (or if i just remove the reference of the 1st combobox from the 2nd combobox then it works again).
The weird thing is:
if i use a listbox instead of the second combo box then it works!!
The xpage design is:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:table>
<xp:tr>
<xp:td>
<xp:comboBox id="comboBox1">
<xp:selectItem itemLabel="a" itemValue="a"></xp:selectItem>
<xp:selectItem itemLabel="b" itemValue="b"></xp:selectItem>
<xp:selectItem itemLabel="c" itemValue="c"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="panel1">
<xp:this.action><![CDATA[#{javascript:var inputText1:com.ibm.xsp.component.xp.XspInputText = getComponent("inputText1");
inputText1.setValue("aaaaaa");}]]></xp:this.action>
<xp:this.onComplete><![CDATA[alert("refreshed panel1");
XSP.partialRefreshPost("#{id:panel0}",{onComplete: function(){alert("refreshed panel0");}});]]></xp:this.onComplete>
</xp:eventHandler></xp:comboBox></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
</xp:table>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:panel id="panel0">
<xp:comboBox id="comboBox2">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var comboBox1:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox1");
if(comboBox1.getValue()!=null){
return comboBox1.getValue().toString();
}else{
return "its empty";
}}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox></xp:panel>
<xp:br></xp:br>
<xp:panel id="panel1">
<xp:inputText id="inputText1"></xp:inputText>
</xp:panel>
<xp:br></xp:br>
<xp:br></xp:br></xp:view>
Just replace 2nd combo with this and see....
<xp:listBox id="listBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var comboBox1:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox1");
if(comboBox1.getValue()!=null){
return comboBox1.getValue().toString();
}else{
return "its empty";
}}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
Any ideas?
When using a combobox, the first value in the list is the selected value. When you are using a list box, you have to choose a value from the list first. If you select a value, your example will fail too.
Because you are changing the allowed values of the combobox/listbox programmatically, and then try to set a value which is not longer in the list (the value is posted back to the server when doing a partial refresh), a validation error occurs, and the value of the inputText ('aaaaa') is not set in the backend.
You can add a xp:messages component inside of the panels, then you can see the error message.
Try doing this bind the controls to a viewScope then it should work.
I always bind my components to something scope variable, field or bean because if you don't you can get lot's of strange value problems. That's my experience.
I've tested you code and my suggestion works as far as I can see.
Related
I have an Angular form I've built that consists of a single material-checkboxes component. I have two copies of this component, one is static and one is dynamic. The only difference is that the dynamic version gets its control values from an API call. Both of these examples have one or more options defaulted as checked when the controls initialize.
The issue I have is that the dynamic one's model is out of sync with its view as long as its left unchanged (ie, if I don't click on any of the checkbox controls to select or unselect them). Once I click on one of the checkboxes, the model updates to sync with the view.
I can tell this because I can submit the static version and get expected results (the defaulted items are posted as values as expected). However, when I submit the dynamic one, I get an empty post.
Here is what the component looks like with the defaulted values before I submit it to see the submitted form data:
And here is the resulted submitted values (as expected):
By way of comparison, here is the same control (material-checkboxes.component.ts) but built using an external datasource to feed in the titleMap and also has defaulted values.
And here is the result after submit of the above form:
So, as the screencaps indicate, The manually created one works as expected and submits the form containing the defaulted values. However, the component with the dynamically generated values, even though the view shows it to have selected default options, submits as EMPTY.
Expected: this.controlValue = ['12', 'd4']
Actual:
onInit > this.controlValue = ['12', 'd4']
After updateValue method > this.controlValue = undefined // But the view is unchanged from the init
However, I can get it to submit data as expected, if I manually change any of the values, even if i set them exactly as they were defaulted. Its as if the form data is not being set until manually clicking on the options.
Here is a snippet from the template that holds the component:
<mat-checkbox
type="checkbox"
[class.mat-checkboxes-invalid]="showError && touched"
[class.mat-checkbox-readonly]="options?.readonly"
[checked]="allChecked"
[disabled]="(controlDisabled$ | async) || options?.readonly"
[color]="options?.color || 'primary'"
[indeterminate]="someChecked"
[name]="options?.name"
(focusout)="onFocusOut()"
(change)="updateAllValues($event)"
[required]="required"
[value]="controlValue">
Update: I found that the issue was that the form control's value is not updated before leaving the syncCurrentValues() method called just after the setTitleMap hostlistener. Adding a call to this.updateValue() in syncCurrentValues() resolves it and the model and view are back in sync. However, there is a problem, but first, here is the code that resolves the issue when there is a default value set in the this.options data:
#HostListener('document:setTitleMap', ['$event'])
setTitleMap(event: CustomEvent) {
if (event.detail.eventName === this.options.wruxDynamicHook && isRequester(this.componentId, event.detail.params)) {
this.checkboxList = buildTitleMap(event.detail.titleMap, this.options.enum, true, true, this.options.allowUnselect || false);
// Data coming in after ngInit. So if this is the first time the list is provided, then use the defaultValues from the options.
const value = this.setDefaultValueComplete ?
this.jsf.getFormControl(this)?.value || [] :
[].concat(this.options?.defaultValue || []);
this.syncCurrentValues(value);
// Set flag to true so we ignore future calls and not overwrite potential user edits
this.setDefaultValueComplete = true;
}
}
updateValue(event: any = {}) {
this.options.showErrors = true;
// this.jsf.updateArrayCheckboxList(this, this.options.readonly ? this.checkboxListInitValues : this.checkboxList);
this.jsf.updateArrayCheckboxList(this, this.checkboxList);
this.onCustomAction(this.checkboxList);
this.onCustomEvent(this.checkboxList);
this.jsf.forceUpdates();
if (this.jsf.mode === 'builder-properties') {
this.jsf.elementBlurred();
}
}
syncCurrentValues(newValues: Array<any>): void {
for (const checkboxItem of this.checkboxList) {
checkboxItem.checked = newValues.includes(checkboxItem.value);
}
this.updateValue(); // Fixed it. Otherwise, the checked items in titlemap never get synced to the model
}
The call to updateData() above fixes the issue in that case. However, when there are no default values in the options data and the checkbox data is loaded externally from an API call that executes after the ngOnInit has fired, I have the same issue. this.controlValue is empty after ngOnInit despite that the view has updated to show checked checkboxes. The model has made that happen through the setTitleMap() method but the controlValue still logs as an empty array.
I have created a custom type with multiple fields.
1 field is a checkbox to "show for all people"
2nd field is a textfield ( you can add multiple textfields ) for adding a code.
I created a view where all those content types are being shown in a page. ( this works )
But now:
When a person enters the site, he has to insert a code. This code is saved into a cookie because it needs to be remembered for about 2 weeks.
So I can't use the contextual filters.
If the checkbox "show for all people" is checked, this block is shown.
if the checkbox "show for all people" is unchecked, this block is hidden, except for people who came in without a code, or if the code is one of the values that was inserted in the 2nd field.
I don't wan't to use views php_filter. But I have no clue how to proceed with this problem.
I tried some solutions on the web to create a custom filter, but the problem here is, that we can't access the form values.
I found a solution, but I'm not sure if this is the correct drupal way.
I used the hook_node_view function to get all nodes that are printed on that page. I check if the code that was inserted into a cookie with the codes that are allowed ( created in the text fields of the content type )
function code_node_view($node, $view_mode, $langcode) {
if ($node->type == 'winning_codes') {
$code = _code_read_cookie('code');
$winning_codes = (!empty($node->field_winning_codes['und'])) ? $node->field_winning_codes['und'] : array();
$winning_codes = array_map(function ($ar) {
return $ar['value'];
}, $winning_codes);
if (!empty($code) && (!in_array($code, $winning_codes))) {
hide($node->content);
}
}
}
I am using Vaadin 7.5.5 and Viritin 1.35. I have implemented a LazyComboBox that is backed by a Spring Data JPA service call and repository.
My basic setup for the LazyComboBox is:
initList(
Site.class,
new FilterablePagingProvider() {
#Override
public List findEntities(int index, String name) {
return sitesService.findByName(name);
}
},
new FilterableCountProvider() {
#Override
public int size(String name) {
return sitesService.countByName(name);
}
},
PAGE_SIZE
);
This works great when I am typing in the combo box.
If I pick an item from the first page (page 0) I can then leave the combo box, come back to it, and click the drop down arrow again and the previously selected item is still selected.
However, if I choose an item from any page other than 0, then clicking the drop down arrow causes the selected item to become null and the user has to find the original item again.
I can post the details of the service and repository if needed but it isn't anything more complicated than a select * from table where name like '%' + name + '%'.
How do I keep the selected value in the combo box no matter what page was chosen?
Thank you.
I think you should call setNullSelectionAllowed(false); on this combo box.
Also, a solution to keep selected value after navigation can be to store it in a session value, then you'll be able to retreive it wherever you are. See Session wiki page
I have set up a ComboBox in grid. It shows everything fine but when I select anything in the ComboBox it is not posting the right value to the server, I debugged it and found out that it always posts value 0.
Any idea why is that and how to fix it?
Here's the important code:
**Controller**
//lista za stvaratelje (ComboBox)
var stvaratelji = newStvarateljiService.GetAllStvaratelje();
//za combobox
ViewBag.stvaratelji = stvaratelji;
//za selectlist
var listaStvaratelja = new SelectList(stvaratelji, "IdStvaratelj", "Naziv");
ViewData["stvaratelji"] = listaStvaratelja;
**View**
columns.ForeignKey(b => b.StvarateljId, (SelectList)ViewData["stvaratelji"]).Title("Stvaratelji").EditorTemplateName("Stvaratelji").Width("30%");
**EditorTemplate**
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Html.Telerik().ComboBoxFor(m => m)
.Name("Stvaratelji")
.Filterable(filtering =>
filtering.FilterMode(AutoCompleteFilterMode.Contains)
)
.Encode(false)
.AutoFill(true)
.BindTo((SelectList)ViewData["stvaratelji"])
%>
I am using selectList with foreignKey because when the grid is not in edit mode it shows value (ID) instead of the name, but that's a completely different issue and one not so important. Nevertheless if someone knows how to set ComboBox to show the name when the grid is not in edit mode it would be also appreciated.
I figured out what is the problem.
I changed the name of EditorTemplate's ComboBoxFor in "StvarateljId" because ComboBoxFor is not bound to the Title in the Grid but the name of the property in "ForeignKey" part.
Dario,
To address the question in the comment of your answer ("not to use SelectList"):
Have you tried changing from a ForeignKey to a simple Bound column with a DisplayTemplates/StvarateljId similar to the EditorTemplates? I have had some success with this setup instead of using the ForeignKey.
Here is a link to the demos at Telerik showing this exact setup.
In the AspxGridView there are two comboboxes in DataItemTemplate, manually loaded. So when user selects one field of the first combo second will be disabled, i wrote this:
<dxe:ASPxComboBox ID="cmbEqualNotEqual" runat="server"
ClientInstanceName="cmbCEqualNotEqual" EnableClientSideAPI="true">
<Items>
<dxe:ListEditItem Text=" " Value="0" />
<dxe:ListEditItem Text="Eşittir" Value="1" />
<dxe:ListEditItem Text="Eşit Değildir" Value="0" />
</Items>
<ClientSideEvents SelectedIndexChanged="function(s,e){
alert(s.GetEnabled());
var selectedIndex = s.GetSelectedIndex();
if(selectedIndex == 2)
{
cmbCBiggerSmaller.SetEnabled(false);
}
}" />
</dxe:ASPxComboBox>
But this code disables the combo at the last row, not the row user works on. How can i disable the row user works on?
Thanks
I answer it for myself:
for (int i = 0; i < grid.VisibleRowCount; i++)
{
ASPxComboBox combito = grid.FindRowCellTemplateControl(i, grid.Columns[2] as GridViewDataColumn, "combito") as ASPxComboBox;
//combito.Value
}
The problem appears because the ClientInstanceName property is set for all editors in the same column to the same value. A possible solution is to handle the HtmlRowCreated event of the ASPxGridView and set the ClientInstanceName for both editors to a unique value. Also, in this event handler you should write the client side SelectedIndexChanged event handler. Finally, to obtain an editor instance, use the ASPxGridView's FindRowCellTemplateControl method.
Also, the following article can be helpful to you:
http://www.devexpress.com/Support/Center/ViewKBIssue.aspx?kbid=K18282