Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkdropdown css
11guest162.158.88.4514r03veAug 9, 2021 2:26:38 PMlinkresources
index.zulzul<zk xmlns:h="native" xmlns:w="client">
<style>
.dropdown-container {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.custom-select-wrapper {
position: relative;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
width: 30%;
margin: 200px auto 0;
z-index: 2; }
.custom-select {
height: auto;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
font-family: "HK Nova", sans-serif;
font-size: 14px;
color: #53596B;
padding: 10px 8px;
border: 1px solid #B3BAC7;
z-index: 2; }
.custom-select__trigger {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px;
background: #ffffff;
cursor: pointer;
z-index: 2; }
.custom-options {
width: calc(100% - 22px);
height: 200px;
position: absolute;
display: block;
top: calc(100% + 15px);
left: 0;
border-radius: 6px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15), 0px 5px 10px rgba(0, 0, 0, 0.15);
background: #fff;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
overflow: hidden;
padding: 16px 8px 19px 0; }
.custom-options--inner {
height: 100%;
overflow-y: auto;
scrollbar-color: #B3BAC7 #F0F5F4;
}
.custom-options--inner::-webkit-scrollbar-track {
border-radius: 100px;
}
.custom-options span {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center; }
.custom-options span img {
margin-right: 12px; }
.custom-select.open .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all; }
.custom-option {
position: relative;
display: block;
padding: 0 22px 0 16px;
font-size: 22px;
font-weight: 300;
color: #53596B;
line-height: 60px;
cursor: pointer;
transition: all 0.5s; }
.custom-option:hover {
cursor: pointer;
color: #283046;
background-color: #E7E9EC; }
.custom-option.selected {
color: #ffffff;
color: #283046; }
.arrow {
position: relative;
height: 15px;
width: 15px; }
.arrow::before, .arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.15rem;
height: 100%;
transition: all 0.5s;
border-radius: 2px; }
.arrow::before {
left: -5px;
transform: rotate(-45deg);
background-color: #B3BAC7; }
.arrow::after {
left: 5px;
transform: rotate(45deg);
background-color: #B3BAC7; }
.open .arrow::before {
left: -5px;
transform: rotate(45deg); }
.open .arrow::after {
left: 5px;
transform: rotate(-45deg); }
</style>
<html>
<div class="custom-select-wrapper dropdown">
<div class="custom-select">
<div class="custom-select__trigger"><span>Select an option</span>
<div class="arrow"></div>
</div>
<div class="custom-options">
<div class="custom-options--inner">
<span class="custom-option selected" data-value="Option1">Option1</span>
<span class="custom-option" data-value="Option2">Option2</span>
<span class="custom-option" data-value="Option3">Option3</span>
<span class="custom-option" data-value="Option4">Option4</span>
<span class="custom-option" data-value="Option5">Option5</span>
<span class="custom-option" data-value="Option6">Option6</span>
<span class="custom-option" data-value="Option7">Option7</span>
</div>
</div>
</div>
</div>
<script>
document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
this.querySelector('.custom-select').classList.toggle('open');
});
for (const option of document.querySelectorAll(".custom-option")) {
option.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
this.classList.add('selected');
this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
}
});
}
window.addEventListener('click', function(e) {
const select = document.querySelector('.custom-select')
if (!select.contains(e.target)) {
select.classList.remove('open');
}
});
</script>
</html>
</zk>