How to insert a vertical panel in the form for laying out the components in a vertical layout fashion.
For example as
Component 1
Component 2
Component 3.
Please give me an example code.
I want to fit it in the following fashion!
Display of the panels
HorizontalPanel mainPanel = new HorizontalPanel();
VerticalPanel leftSidePanel = new VerticalPanel();
TextBox textBox1 = new TextBox();
TextBox textBox2 = new TextBox();
leftSidePanel.addMember(textBox1);
leftSidePanel.addMember(textBox2);
VerticalPanel rightSidePanel = new VerticalPanel();
ListBox listBox = new ListBox();
listBox.addItem("value1","value1");
listBox.addItem("value2","value2");
rigthSidePanel.addMember(listBox);
mainPanel.addMember(leftSidePanel);
mainPanel.addMember(rightSidePanel);
Related
I have a table in my UI which is a grid component. The value of one of the columns is calculated based on other column input values. So for example there are columns A,B, and C and value of column C = A + B. What I want to achieve is when user edits a row, before clicking the save button it would be able to see the calculated value in edit mode.
Is there a possibility to do that without Javascript or if not, how can I run a javascript snippet on onBlur event of the editable columns (A and B).
The calculated column is not editable by user.
This is a non functional code snippet that shows more or less what is the basis of my code.
Grid<Numbers> grid = new Grid<>(Numbers.class, false);
Editor<Numbers> editor = grid.getEditor();
Grid.Column<Numbers> aColumn = grid
.addColumn(Numbers::getA).setHeader("A")
.setWidth("120px").setFlexGrow(0);
Grid.Column<Numbers> bColumn = grid.addColumn(Numbers::getB)
.setHeader("B").setWidth("120px").setFlexGrow(0);
Grid.Column<Numbers> cColumn = grid.addColumn(Numbers::getC)
.setHeader("C");
Grid.Column<Numbers> editColumn = grid.addComponentColumn(numbers -> {
Button editButton = new Button("Edit");
editButton.addClickListener(e -> {
if (editor.isOpen())
editor.cancel();
grid.getEditor().editItem(numbers);
});
return editButton;
}).setWidth("150px").setFlexGrow(0);
Binder<Numbers> binder = new Binder<>(Numbers.class);
editor.setBinder(binder);
editor.setBuffered(true);
TextField aField = new TextField();
aField.setWidthFull();
binder.forField(aField)
.bind(Numbers::getA, Numbers::setA);
aColumn.setEditorComponent(aField);
TextField bField = new TextField();
bField.setWidthFull();
binder.forField(bField)
.bind(Numbers::getB, Numbers::setB);
bColumn.setEditorComponent(bField);
TextField cField = new TextField();
cField.setWidthFull();
binder.forField(cField)
.bind(Numbers::getC, Numbers::setC);
cColumn.setEditable(false);
Button saveButton = new Button("Save", e -> editor.save());
Button cancelButton = new Button(VaadinIcon.CLOSE.create(),
e -> editor.cancel());
cancelButton.addThemeVariants(ButtonVariant.LUMO_ICON,
ButtonVariant.LUMO_ERROR);
HorizontalLayout actions = new HorizontalLayout(saveButton,
cancelButton);
actions.setPadding(false);
editColumn.setEditorComponent(actions);
I tried adding this to some events:
Page.getCurrent().getJavaScript().execute("alert('the calculated value')");
The problem is the elements that are created by grid component have no id, so accessing them directly is not an option. Traversing dom is not really feasible too.
I want to align the Button on the same line as the Text Fields. The item alignment has been set to Alignment.CENTER, but as you can see from the image, the vertical centers of the TextFields are lower due to the label on top of them.
HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.setAlignItems(FlexComponent.Alignment.CENTER);
Div div = new Div(buttonAddPriceRange);
horizontalLayout.add(spanneVon, spanneBis, div);
layout.setAlignItems(Alignment.BASELINE); allows you to align items by the baseline, that is with the bottom.
HorizontalLayout hl = new HorizontalLayout(new TextField("hello"),
new Button("world"));
hl.setAlignItems(Alignment.BASELINE);
add(hl);
Check out the great video Master Vaadin VerticalLayout and HorizontalLayout - layouts in Vaadin Flow to learn more.
Try ...
horizontalLayout.setAlignItems(FlexComponent.Alignment.BASELINE);
How do I make my texfield caption to the left of the text box instead of defaulting on top of it?
HorizontalLayout hLayout = new HorizontalLayout();
setConent(hLayout);
TextField tf = new TextField();
hLayout.addComponent(tf);
Either way use FormLayout to wrap every TextBox as suggested in comments, or you have to alter the css of your TextBox. Set style to your TextBox to only apply this to those you want.
TextBox yourTextBox = new TextBox();
yourTextBox.addStyleName("inline-label");
then the css would look like this:
.v-caption-inline-label{
display: inline-block;
}
Why not do it this way:
final FormLayout form = new FormLayout();
form.addComponent(new TextField("Caption line 1"));
final HorizontalLayout formLine2 = new HorizontalLayout();
formLine2.addComponents(new TextField(), new Button(), new Button());
formLine2.setCaption("Caption line 2");
The text field in line 1 has the caption left.
The text field in line 2 would have the caption on top due to the horizontal layout container. By moving the caption from the text field to the horizontal layout, the caption will be on the left side again.
I need to add a label to my checkbox in smart GWT. For example, I have three fruits: apple, mango and banana. How can I add the label Fruits as heading. I am also unable to use CheckboxGroup.
CheckBox check1 = new CheckBox();
check1.setBoxLabel("Classical");
CheckBox check2 = new CheckBox();
check2.setBoxLabel("Rock");
check2.setValue(true);
CheckBox check3 = new CheckBox();
check3.setBoxLabel("Blue");
CheckBoxGroup checkGroup = new CheckBoxGroup();
checkGroup.setFieldLabel("Music");
checkGroup.add(check1);
checkGroup.add(check2);
checkGroup.add(check3);
Hy Abhaya, first of all i don't know what version of smart GWT you use but i can see that this is not smart GWT, its more like gwt component and that CheckBoxGroup is some awt component.
If You want to use smart GWT check box component then use CheckboxItem widget, if its item that means you need to use dynamic form.
So lets say:
import com.smartgwt.client.widgets.form.fields.CheckboxItem;
import com.smartgwt.client.widgets.form.DynamicForm;
CheckBoxItem item1 = new CheckBoxItem();
item1.setTitle("Classical");
CheckBoxItem item2 = new CheckBoxItem();
item1.setTitle("Rock");
So now we have 2 check box items, wee need to put them in dynamic form like this (I set border so u can see what happens):
DynamicForm box = new DynamicForm();
box.setBorder("1pt solid red")
box.setFields(item1,item2);
Lets draw that:
box.draw();
This is output:
drawn dynamic form
Ok now we need title, best way is to add lable before dynamic form. Now dynamic form is root element, lets put it in some layout (new package), layout will be vertical so for every new member it will be one beneath other:
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.Label;
Label title = new Label();
title.setContents("Music");
title.setHeight(20);
VLayout lay = new VLayout();
lay.setBorder("1pt solid black");
lay.addMember(title);
lay.addMember(box);
So wee added title in layout then dynamic form named "box", now u don't need to draw() box, only layout because that layout consists of label and box that will be automatically drawn:
lay.draw();
And output is this:
drawn vertical layout
Here is the little bit styled look:
Styled look
Entire code:
CheckboxItem item1 = new CheckboxItem();
item1.setTitle("Classical");
CheckboxItem item2 = new CheckboxItem();
item2.setTitle("Rock");
CheckboxItem item3 = new CheckboxItem();
item3.setTitle("Metal");
CheckboxItem item4 = new CheckboxItem();
item4.setTitle("House");
DynamicForm box = new DynamicForm();
box.setFields(item1,item2, item3, item4);
box.setWidth100();
box.setHeight100();
box.draw();
Label title = new Label();
title.setContents("<h3>Music:</h3>");
title.setHeight(20);
VLayout lay = new VLayout();
lay.setMargin(20);
lay.setBorder("1pt solid black");
lay.setPadding(10);
lay.setBackgroundColor("#e6e6e6");
lay.addMember(title);
lay.addMember(box);
lay.draw();
In property setContents() u can use HTML tags and CSS
I hope it helps.
Regards, Jakov A.
I am using a DEvExpress mvc grid with a few combo boxes and I was wondering how I can set the maximum/minimum height (in a number of rows) of the drop down section.
For example can I set the rows visible before you have to scroll or even if there is only one row of data for the drop down height to be set to a certain number of rows.
The current code for the combo I have now is
#Html.DevExpress().ComboBox(edtSettings =>
{
edtSettings.ControlStyle.CssClass = "employeeDetailsGridEditField";
edtSettings.Name = "DepartmentID";
edtSettings.Width = 350;
//edtSettings.Height = 200;
//THIS sets the height of the initial control not the drop down part
edtSettings.Properties.TextField = "DepartmentName";
edtSettings.Properties.ValueField = "DepartmentID";
edtSettings.Properties.ValueType = typeof(int);
edtSettings.Properties.DropDownStyle = DropDownStyle.DropDown;
edtSettings.ShowModelErrors = true;
}).BindList(Model.DepartmentList).Bind(Model.EmployeeSingle.DefaultDepartmentID).GetHtml()
Is there a property for the drop down section height?
Use the ComboBoxProperties.DropDownRows property to get or set the number of list items displayed within the editor's scrollable dropdown window simultaneously:
#Html.DevExpress().ComboBox(edtSettings =>
{
//...
edtSettings.Properties.DropDownRows = 5; // default is 7
//...
}).BindList(Model.DepartmentList).Bind(Model.EmployeeSingle.DefaultDepartmentID).GetHtml()