I have following code:
var
cbMyCombo: TcxLookupComboBox;
I have a dataset which has following query:
SELECT ID, NAME from MYTABLE;
This query works fine.
Now I have done binding in cbMyCombo in DFM file as following:
object cbMyCombo: TcxLookupComboBox
Properties.KeyFieldNames = 'ID'
Properties.ListColumns = <
item
FieldName = 'NAME'
end>
end
It works fine and combobox is binded. My problem is, nothing is selected by default. I want that initially combobox should contain "View All" option.
I am trying like this:
cbMyCombo.Text := 'View All'
But, this is not setting anything because "View All" is not the part of the list which I have binded to it. I want to manually add "View All" as FieldName and 0 as KeyFieldName and this should be selected by default. How can I do this?
You should add the 'View all', 0 row to your dataset and set the EditValue of your combobox to 0 in your intialization.
Related
In Vaadin Flow 23.1.x we have a grid with different filter fields in the header.
In the screen below the "Vendorstatus" is a ComboBox and the ValudateCode is a Select component.
What we now see:
If we click in the Vedonrstatus field, the dropdown opens and nothing else happens, which is ok
If we click in the ValutaCode field, the dropdown opens too, but also the "Sort" of the grid is triggered.
So it looks like the select component does not consume/block the ClickEvent from propagating down to the parent components.
Is there a way to prevent the click to trigger the sort of the column grid?
Workarround would be to re-implement my Select based header filter with ComboBox type ones.
The code to generate the filter header:
headerRow.getCell(col).setComponent(createSelectFilter(...));
And the createSelectFilter method:
private static Component createSelectFilter(...) {
VerticalLayout vl= new VerticalLayout();
Label l= new Label("Headername");
vl.add(l);
Select<MyobjClass> select= new Select<>();
select.setItems(...);
select.getElement().addEventListener("click",
event -> {})
.addEventData("event.stopPropagation()");
select.addValueChangeListener( e --> updateDataFilter());
vl add(select);
return vl;
}
This does not stop propagation of the click to open the dropdown and select a value to also trigger a sort "command" on that column
You must use this method to add the listener them you can
select.getElement().addEventListener("click",
event -> ...)
.addEventData("event.stopPropagation()");
My application (based on Vaadin 8) has a CheckBox and a CheckBoxGroup wrapped in a HorizontalLayout.
CheckBox myCheckBox = new CheckBox("My Checkbox");
CheckBoxGroup<String> multi = new CheckBoxGroup<>("Multiple Selection");
multi.setItems("Many", "Muchos", "Monta");
multi.setCaption(null);
multi.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
checkBoxLayout.addComponents(myCheckBox, multi);
checkBoxLayout.setComponentAlignment(myCheckBox, BOTTOM_LEFT);
checkBoxLayout.setComponentAlignment(multi, BOTTOM_LEFT);
this.addComponent(checkBoxLayout);
The problem is that the horizontal alignment of the checkbox and the checkbox group is not correct.
Setting the checkbox group caption to null does not help either. I suppose that the checkbox group has some additional spacing which could cause this behavior. How can I make sure that the horizonal alignment is working as used with setComponentAlignment?
Update 1
The solution suggested by #ollitietavainen (using MIDDLE_CENTER) results in the following:
If you have nothing else than the checkboxes inside the HorizontalLayout, using Alignment.MIDDLE_CENTER seems to work better than BOTTOM_LEFT.
I tried removing the CheckBoxGroupState.primaryStyleName "v-select-optiongroup" style name than along with the alignment suggested by https://stackoverflow.com/a/65180983/12854146 I have the following code
HorizontalLayout checkBoxLayout = new HorizontalLayout();
checkBoxLayout.setMargin(true);
CheckBox myCheckBox = new CheckBox("My Checkbox");
CheckBoxGroup<String> multi = new CheckBoxGroup<>("Multiple Selection");
multi.setItems("Many", "Muchos", "Monta");
multi.setCaption(null);
multi.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
multi.removeStyleNames("v-select-optiongroup");
checkBoxLayout.addComponents(myCheckBox, multi);
checkBoxLayout.setComponentAlignment(myCheckBox, MIDDLE_CENTER);
checkBoxLayout.setComponentAlignment(multi, MIDDLE_CENTER);
you may have a similar output if you do not remove the style name "v-select-optiongroup" from multi and instead you add it to your checkbox with
myCheckBox.addStyleName("select-optiongroup");
How to set value on jeasyui combobox inside propertygrid using jquery?
I tried to fire the grid using a selector, and then select the "td" where the combobox is generated, but without success.
The value of the "td" changes, but when you click on the combobox or make a post the original previous value returns
$("#datagrid-row-r4-2-3 > td:nth-child(3) > div").html('new value');
I got it, follow the code:
//update visual value on screen
$("#datagrid-row-r4-2-3 > td:nth-child(3) > div").html(row.cd_erro);
//update value
$("#pg").propertygrid('getRows')[3].value = 'new value';
I have a custom controller in SQLFORM.grid and I am using links. The problem is (so it appears) that since I am using left join there when my custom function works, edit and view do not work.
So my links is the following
links = [lambda row: A('',_class='glyphicon glyphicon glyphicon-remove-sign',
callback=URL('settings','deactivate',vars=dict(table='workers_skills',field = 'ws_status'
,value = row.workers_skills.id )))]
my grid constructor
grid_workersskills= SQLFORM.grid(query=query,left=[db.workers.on(db.workers_skills.ws_worker==db.workers.id),
db.skills.on(db.workers_skills.ws_skill==db.skills.id)],
fields=fields, searchable=False, orderby=[db.workers.w_nick_name],create=True,
deletable=False, editable=True, paginate=50, buttons_placement = 'right',
showbuttontext = False,
links = links,
#oncreate=myfunction,
ui = dict(widget='',
header='',
content='',
default='',
cornerall='',
cornertop='',
cornerbottom='',
button='button btn btn-default',
buttontext='buttontext button',
buttonadd='icon plus icon-plus glyphicon glyphicon-plus',
buttonback='icon leftarrow icon-arrow-left glyphicon glyphicon-arrow-left',
buttonexport='icon downarrow icon-download glyphicon glyphicon-download',
buttondelete='icon trash icon-trash glyphicon glyphicon-trash',
buttonedit='icon pen icon-pencil glyphicon glyphicon-pencil',
buttontable='icon rightarrow icon-arrow-right glyphicon glyphicon-arrow-right',
buttonview='icon magnifier icon-zoom-in glyphicon glyphicon-eye-open',
),
exportclasses = dict(csv_with_hidden_cols=False, html = False, tsv = False, tsv_with_hidden_cols=False, json = False))
the problem is caused by row.workers_skills.id
If i keep it this way my function deactivate works ok, but when I click on edit or view of the record I get an error
Row attribute has no object workers_skills
If I put it to row.id the view and edit work, but my deactivate function not because ID or the record is not created.
I have been struggling with this for the last week. Please help
Thank you
When the grid involves a join, you must refer to fields within a row via the row.table.field format. However, when you view/edit a record from such a grid, only the record from a single table is shown (i.e., there is no longer a join involved), so you must now refer to fields within a row via the row.field format. Because your "link" appears in the grid as well as in the view/edit page, whichever format you use to refer to the id field, it will result in an error in one of those two contexts.
So, all you need to do is ensure your code works in both contexts. Here's a simple trick:
Instead of:
row.workers_skills.id
do:
row.get('workers_skills', row).id
The .get() method attempts to retrieves the 'workers_skills' key, but if it doesn't exist, it instead returns a default value, which in this case is just the original row. It then retrieves the "id" field of that returned object (either the original row or the row.workers_skills sub-row).
I want to create Vaadin drop down with 2 separators in it. I couldn't find a way to implement that, can anyone help me to solve this issue?
This is the way I want to display my drop down:
Option 1
Option 2
------------;
select 1
select 2
-----------;
group 1
How can I do that?
There is no built-in way to add separators to selects. The only way I can think of is to add an item with the desired separator as its caption. For example if you use the default caption (item id) select.addItem("-----"); should be enough. This should work for both ComboBoxes and NativeSelects.
You can implement a new Vaadin component including the client behaviour, but this is not an easy solution. This page https://vaadin.com/book/-/page/gwt.html of "Book of Vaadin" and Vaadin forum can help for that.
Also, creating your own component using existing components is another solution. You can implement a special combobox which takes values of String or Component arrays. The way of doing this is using Vaadin panels, layouts and windows with size and locations and click listeners.
I haven't tried it myself but give a go at NativeSelection dropdown.
You can always do
{select.addItem("-----");}
Once I also wanted a do something like that but there was no proper way to do that with Vaadin. I actually created a Vaadin widget extending the Combo Box. In the client side widget of Vaadin they filter out the HTML content before adding items to the list. So Using the client side code I override that functionality and use HTML tag "" to add the line.
select.addItem("-----");
looks like the best way, I dont know about some other
Btw if you are reading items from some list you can combine that with some item counter and (itemsCount%n)==0 operator to set separator after 'n' items inserted :)
You can add the item to the selected (as mentioned before) and then disable the separators with some javascript:
add the item to the select.
cb.addItem("separator");
cb.setItemCaption("separator", "-------------");
execute the javascript
final String javascript = ""
"var selects = document.getElementsByTagName('select');"
"for(var j = 0;j < selects.length;j++){"
"var op = selects[j].getElementsByTagName('option');"
"for (var i = 0; i < op.length; i++) {"
" if(op[i].text == '" + separatorText + "') op[i].disabled = true;"
"}}";
Page.getCurrent().getJavaScript().execute(javascript);
Is there a reason that you use the ComboBox instead of the Select, because with the select you can do that.
Select select = new Select();
select.setItems("Option 1", "Option 2", "select 1", "select 2", "group 1");
select.addComponentAtIndex(2, new Hr());
select.addComponentAtIndex(5, new Hr());
Or you can use a MenuBar but it looks very diferent that the ComboBox.
menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Select");
menuItem.getSubMenu().addItem("Option 1");
menuItem.getSubMenu().addItem("Option 2");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("group 1");