zk grid several columns in the same row
I´m addressing a issue with zk grid that I don´t know how to solve.
I explain my problem:
I need to create a grid that shows a list of questions/answer, the different approach of that grid is that I need to show two pairs question/answer in the same row.
The next screenshot show how the grid has to work; i.e. the desired aspect:
I tried to do that using a template row:
<template name="model"
var="modeloIzquierda">
<row>
<label
class="${modeloIzquierda.procedencia}"
value="@bind(modeloIzquierda.pregunta)" width="50px"
if='${!modeloIzquierda.par}' />
<textbox
style="border:none;"
value="@bind(modeloIzquierda.respuesta)"
onChanging="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=event.value)"
class="textboxcadm ${modeloIzquierda.procedencia}"
if='${modeloIzquierda.tipoPregunta eq "T" and !modeloIzquierda.par}' width="100%" />
<combobox
value="@bind(modeloIzquierda.respuesta)"
onChanging="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=event.value)"
class="${modeloIzquierda.procedencia}"
if='${modeloIzquierda.tipoPregunta eq "E" and !modeloIzquierda.par}'
width="90px">
<comboitem
label="A" />
<comboitem
label="B" />
<comboitem
label="C" />
</combobox>
<checkbox
checked="@bind(modeloIzquierda.respuesta)"
onCheck="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=self.checked)"
if='${modeloIzquierda.tipoPregunta eq "F" and !modeloIzquierda.par}'>
</checkbox>
<label
class="${modeloIzquierda.procedencia}"
value="@bind(modeloIzquierda.pregunta)" width="50px"
if='${modeloIzquierda.par}' />
<textbox
style="border:none;"
value="@bind(modeloIzquierda.respuesta)"
onChanging="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=event.value)"
class="textboxcadm ${modeloIzquierda.procedencia}"
if='${modeloIzquierda.tipoPregunta eq "T" and modeloIzquierda.par}' width="100%" />
<combobox
value="@bind(modeloIzquierda.respuesta)"
onChanging="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=event.value)"
class="${modeloIzquierda.procedencia}"
if='${modeloIzquierda.tipoPregunta eq "E" and modeloIzquierda.par}'
width="90px">
<comboitem
label="A" />
<comboitem
label="B" />
<comboitem
label="C" />
</combobox>
<checkbox
checked="@bind(modeloIzquierda.respuesta)"
onCheck="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=self.checked)"
if='${modeloIzquierda.tipoPregunta eq "F" and modeloIzquierda.par}'>
</checkbox>
</row>
</template>
The 'par' property indicates if the element (label, combobox, textbox or checkbox) has to appear in the left or right side of the grid.
But unfortunately this code is not working how I need. The result of my code (i.e actual aspect):
As you can see, independently of what label, textbox, combobox or checkbox is being shown the grid uses a new row for every one.
I´ve no idea how to deal with this issue. I´d appreciate any help, whatever solution will be welcome.
Solution
Sometimes it's just to difficult (or impossible) to write it in the zul.
Here is an example how you can achieve such thing with a rowRenderer :
MyEnum.java :
public enum MyEnum {
A(true),
B(false),
C(true),
D(false),
E(false);
private boolean par;
private MyEnum(boolean par) {
this.par = par;
}
public boolean isPar() {
return par;
}
}
test.zul :
<?xml version="1.0" encoding="UTF-8"?>
<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('be.mil.web.TestVM')" >
<grid model="@init(vm.model)" rowRenderer="be.mil.web.MyRowRenderer"/>
</window>
TestVM.java :
public class TestVM {
public ListModel getModel() {
return new ListModelList(MyEnum.values());
}
}
MyRowRenderer.java :
public class MyRowRenderer implements RowRenderer<MyEnum>{
@Override
public void render(Row row, MyEnum t, int i) throws Exception {
if (t.isPar()) {
row.appendChild(new Label(String.valueOf(t)));
} else {
row.getPreviousSibling().appendChild(new Label(String.valueOf(t)));
row.getParent().removeChild(row);
}
}
}
- Best way to show dynamic changes on Image in Gridview with MVVM
- How to follow MVVM patterns for storing a TextField's value when using a sealed class UiState in the view model?
- Override the default behaviour of the NumberBox clear button WinUI 3
- Why is my button disabled when I set the open dialog command?
- In MVVM is it acceptable to access the ViewModel in the view's code behind?
- Unable to start activity ComponentInfo{.views.LoginActivity}: java.lang.RuntimeException: Cannot create an instance of class .viewmodels.AuthViewModel
- How to reuse globally already loaded observable collection in Maui app?
- How do I manage uiState for multiple sections?
- How to simplify MVVM Repository function using Room and Retrofit
- My WinUI 3 app sporadically crashes after clicking a button on a user control that executes code via commands from Dependency Properties
- Cannot create an instance of class ViewModel
- Maui MVVM: most simple pattern not working
- Initialize async data in ViewModel .NET MAUI
- MVVM paging & sorting
- How to trigger a OnPropertyChanged event on a datagrid using MVVM/PRISM pattern
- Kotin passing arguments to ViewModel from fragment
- How to control the scroll position of a ListBox in a MVVM WPF app
- Viewmodels in android using mvvm and jetpackcompose
- Save/Load a game in MVVM via Binary Serialization
- How to bind custom UserControl button click to command to UCs parent viewModel
- Android: How to Enforce new VM creation using viewModel function?
- How can I show a Balloon Tip over a textbox?
- Autocomplete TextBox that follows MVVM pattern
- Populate more nested WinUI TreeView
- Executing a command on Checkbox.Checked or Unchecked
- MAUI - how to bind VisualElement property to a variable in a View
- Maui (Android): Bind Editor/Entry in ContentTemplate to Relay Command on ViewModel using Behaviours
- Is it possible to use invoke a command using an Microsoft.Xaml.Behaviors.EventTrigger with attached events?
- How to bind an ObservableCollection<bool> to a Listbox of Checkboxes in WPF
- How do nested jobs launched in the viewModelScope work?