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 AMlinktest include with param
1guest197.14.1.653ogrr0dDec 16, 2014 4:55:30 PMlinkresources
index.zulzul <window id="rtWin"
xmlns:w="http://www.zkoss.org/2005/zk/client"
width="100%"
visible="true"
contentStyle="overflow:auto">
<groupbox id="rtGroupbox" mold="3d" contentStyle="overflow: auto;">
<caption ></caption>
<include src="test.html"></include>
</groupbox>
</window>test.htmlzul<html>
<head>
<link rel="stylesheet/less" type="text/css" href="style/sevenMapIcon.less" />
<script>
function changeColor() {
}
less = {
async : true,
env: 'production',
functions : {},
globalVars : {
svgAssetColor : '#00FF00',
sevenMapIconAssetIconOpacity : 0,
sevenMapIconAssetSpeedOpacity : 0,
sevenMapIconAssetTempOpacity : 0,
sevenMapIconAssetAlertOpacity : 0,
sevenMapIconAssetPlateNumberOpacity : 0,
sevenMapIconAssetDriverOpacity : 0
}
};
</script>
<script src="js/plugins/less-1.7.3.min.js" type="text/javascript"></script>
<!-- END LESS -->
<script type="template/text" id="basic_window_template">
<div class="window">
<div class="window-header">
<button type="button" class="close" data-dismiss="window" aria-hidden="true"> <span class="glyphicon glyphicon-remove"></span> </button>
<h4 class="window-title">
</h4>
</div>
<div class="window-body">
</div>
<div class="window-footer">
</div>
</div>
</script>
<style>
ul.dropdown-menu-form {
padding: 5px 10px 0;
}
.dropdown-menu-form .radio, .dropdown-menu-form .checkbox {
margin-top: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.dropdown-menu-form input[type="radio"] {
float: left;
margin-left: -20px;
}
.dropdown-menu-form label:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
</style>
<style>
ngi-Fleetlist .btn-group {
width: 100%;
}
</style>
<style>
ngi-Fleetlist button{
padding: 7.5px 12px !important;
}
</style>
<script>
$('.dropdown-menu-form').on('click', function(e) {
if ($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
});
</script>
</head>
<body>
<div id="rtApp" ng-app="rtApp" style="display: none;">
<div ng-controller="rtCtrl" id="rtCtrl"
style="height: 100%; overflow-y: auto; min-height: 400px;">
<ngi-olmap id="mapComp"></ngi-olmap>
<div class="list">
<!-- Ligne 0 -->
<div ng-if="isAdmin || isReseller">
<select ng-model="selectModel.selectedOrganisation" ng-options="organisation.name for organisation in organisations | orderBy:'name' ">
</select>
<br/>
<br/>
<!-- <select ng-model="selectedOrganisation"> -->
<!-- <option ng-repeat="organisation in organisations" value="{{ organisation }}">{{ organisation.name }}</option> -->
<!-- </select> -->
</div>
<!-- FIN 1ere Ligne : recherche et flottes -->
<!-- 1ere Ligne : recherche et flottes -->
<div>
<div class="input-group" style="width: 49%; float: left">
<input type="text" class="form-control" ng-model="query"
typeahead="state for state in searchPlatesAndDrivers($viewValue)"
typeahead-min-length="3" typeahead-wait-ms="200"
placeholder="{{ 'nf.fleet.search' | translate }}"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search" style="font-size: 15.5px;"></i> </button>
</div>
</div>
<ngi-Fleetlist data="fleets" style="width:49%; float:right"></ngi-Fleetlist>
</div>
<!-- FIN 1ere Ligne : recherche et flottes -->
<br/>
<br/>
<br/>
<!-- FIN 2eme Ligne -->
<!-- 3eme Ligne -->
<div class="btn-group btn-group-justified">
<!-- Men Filtre -->
<div class="btn-group">
<button type="button"
ng-class="{ 'btn-default': stateQuery=='', 'btn-success': stateQuery=='drive', 'btn-danger': stateQuery=='stop'}"
class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-filter"></span> {{ 'nf.sensor.tab.filter' | translate }} <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu" style="min-width: 120px;">
<li class="dropdown-submenu"><a tabindex="-1" href="#">{{ 'nf.status' | translate }}</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#" ng-click="stateQuery=''">{{ 'nf.all' | translate }}</a></li>
<li><a href="#" ng-click="stateQuery='drive'">{{ 'nf.drive.status' | translate }}</a></li>
<li><a href="#" ng-click="stateQuery='stop'">{{ 'nf.stop.status' | translate }}</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">{{ 'nf.menu.asset.type' | translate }}</a>
<ul class="dropdown-menu dropdown-menu-form" style="min-width: 200px;">
<li ng-repeat="at in rtAssetTypes">
<label class="checkbox" style="font-weight: normal;" ng-show="at.shown">
<input type="checkbox" ng-model="at.enabled"/>
<span style="font-family:sevenFont;font-family: sevenFont;line-height: 20px;font-size: 30px;float: left;"> {{ at.i }} </span> <span style="line-height: 20px;padding-left: 5px;"> {{ at.l | translate }}</span> </label>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">{{ 'nf.vehicle.sensors' | translate }}</a>
<ul class="dropdown-menu dropdown-menu-form" style="min-width: 200px;">
<li>
<label>{{ 'nf.sensor.analog' | translate }}</label>
</li>
<li ng-repeat="sensor in rtSensors" ng-show="sensor.c=='ANALOG'">
<label class="checkbox" style="font-weight: normal;">
<input type="checkbox" ng-model="sensor.enabled"/>
{{ sensor.l | translate }} </label>
</li>
<li class="divider"></li>
<li>
<label>{{ 'nf.sensor.digital' | translate }}</label>
</li>
<li ng-repeat="sensor in rtSensors" ng-show="sensor.c=='DIGITAL'">
<label class="checkbox" style="font-weight: normal;">
<input type="checkbox" ng-model="sensor.enabled"/>
{{ sensor.l | translate }} </label>
</li>
</ul>
</li>
</ul>
</div>
<!-- Men Tri -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"> <span class="glyphicon glyphicon-sort"></span> {{ 'nf.sort' | translate }} <span class="caret"></span> </button>
<ul class="dropdown-menu dropdown-menu-form" role="menu">
<li><a href="#" ng-click="displayParams.orderPropReverse=!displayParams.orderPropReverse">{{ 'nf.sort.invert' | translate }}</a></li>
<li class="divider"></li>
<li> <a href="#" ng-click="displayParams.orderProp='plateNumber'">
<label class="checkbox" style="font-weight: normal;">
<input type="radio" value="plateNumber" ng-model="displayParams.orderProp"/>
{{ 'nf.asset.identification' | translate }} </label>
</a> <a href="#" ng-click="displayParams.orderProp='driver'">
<label class="checkbox" style="font-weight: normal;">
<input type="radio" value="driver" ng-model="displayParams.orderProp"/>
{{ 'nf.driver' | translate }} </label>
</a> <a href="#" ng-click="displayParams.orderProp='speed'">
<label class="checkbox" style="font-weight: normal;">
<input type="radio" value="speed" ng-model="displayParams.orderProp"/>
{{ 'nf.speed' | translate }} </label>
</a> </li>
</ul>
</div>
<!-- Menu Liste -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"> <span class="glyphicon glyphicon-list"></span> {{ 'nf.show.list' | translate }} <span class="caret"></span> </button>
<ul class="dropdown-menu dropdown-menu-form" style="right: 0; left: inherit;">
<li>
<label>{{ 'nf.button.vue.display' | translate }}</label>
</li>
<li ng-repeat="tag in displayParams.tags">
<label class="checkbox"
style="font-weight: normal;">
<input type="checkbox"
ng-model="tag.enabled"/>
{{tag.text | translate}} </label>
</li>
<!-- <li class="divider"></li> -->
<!-- <li><label>{{ 'nf.options' | translate }}</label></li> -->
<li>
<label class="checkbox" style="font-weight: normal;">
<input type="checkbox" ng-model="displayParams.showAssetIcons"/>
{{ 'nf.icons' | translate }} </label>
<!-- </label> <label class="checkbox" style="font-weight: normal;"> <input -->
<!-- type="checkbox" ng-model="displayParams.showFleetsFooter"> -->
<!-- {{ 'nf.fleet.stats' | translate }} -->
<label class="checkbox" style="font-weight: normal;">
<input
type="checkbox" ng-model="displayParams.showAssetAlerts"/>
{{ 'nf.report.nombre.alert' | translate }} </label>
<label class="checkbox" style="font-weight: normal;">
<input
type="checkbox" ng-model="displayParams.showFleetsHeading"/>
{{ 'nf.fleet.name' | translate }}</label>
</li>
</ul>
</div>
<!-- Menu Carte -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"> <span class="glyphicon glyphicon-map-marker"></span> {{ 'nf.map' | translate }} <span class="caret"></span> </button>
<ul class="dropdown-menu dropdown-menu-form" role="menu" style="right: 0; left: inherit;">
<li> <a href="#">
<label class="checkbox" style="font-weight: normal;">
<input type="checkbox" ng-model="displayParams.sevenMapIconAssetPlateNumber" />
{{ 'nf.asset.identification' | translate }} </label>
</a> </li>
<li> <a href="#">
<label class="checkbox" style="font-weight: normal;">
<input type="checkbox" ng-model="displayParams.sevenMapIconAssetDriver"/>
{{ 'nf.driver' | translate }} </label>
</a> </li>
<li class="divider"></li>
<li> <a href="#" ng-click="displayParams.sevenMapIconAsset='icon'">
<label class="checkbox" style="font-weight: normal;">
<input type="radio" value="icon" ng-model="displayParams.sevenMapIconAsset"/>
{{ 'nf.icon' | translate }} </label>
</a> <a href="#" ng-click="displayParams.sevenMapIconAsset='speed'">
<label class="checkbox" style="font-weight: normal;">
<input type="radio" value="speed" ng-model="displayParams.sevenMapIconAsset"/>
{{ 'nf.speed' | translate }} </label>
</a> <a href="#" ng-click="displayParams.sevenMapIconAsset='temp'">
<label class="checkbox" style="font-weight: normal;">
<input type="radio" value="temp" ng-model="displayParams.sevenMapIconAsset"/>
{{ 'nf.history.series.tempSeries' | translate }} </label>
</a> <a href="#" ng-click="displayParams.sevenMapIconAsset='alert'">
<label class="checkbox" style="font-weight: normal;">
<input type="radio" value="alert" ng-model="displayParams.sevenMapIconAsset"/>
{{ 'nf.report.nombre.alert' | translate }} </label>
</a> </li>
<!-- <li class="divider"></li> -->
<!-- <li><label>{{ 'nf.map.pinnedDashWidth' | translate }}</label></li> -->
<!-- <li><input type="range" name="pinnedDashWidth" ng-model="pinnedDashWidth" min="150" max="400" style="background-color: #DEDEDE;"></li> -->
<!-- <li class="divider"></li> -->
</ul>
</div>
<!-- Menu Tuiles -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"> <span class="glyphicon glyphicon glyphicon-th-large"></span> {{ 'nf.show.tiles' | translate }} <span class="caret"></span> </button>
<ul class="dropdown-menu dropdown-menu-form" style="right: 0; left: inherit;">
<li>
<label>{{ 'nf.map.pinnedDashWidth' | translate }}</label>
</li>
<li>
<input type="range" name="pinnedDashWidth" ng-model="pinnedDashWidth" min="150" max="400" style="background-color: #DEDEDE;"/>
</li>
<li class="divider"></li>
<li> <a href="#" ng-click="closeAllTiles()"> <span class="glyphicon glyphicon-remove"></span> {{ 'nf.close.all.tiles' | translate }} </a> </li>
</ul>
</div>
</div>
<br/>
</div>
<div ng-switch="ng-switch" on="displayParams.affiche" style="overflow: auto;">
<div ng-switch-when="assetlist">
<ngi-Assetlist id="ngiAssetlistElement" wm ="windowManager"></ngi-Assetlist>
</div>
<div ng-switch-when="assetGrid">
<ngi-Assetgrid id="ngiAssetgridElement"></ngi-Assetgrid>
<!-- <ng-include src="'templates/assetGrid.html'"></ng-include> -->
</div>
<div ng-switch-when="liste2">
<ng-include src="'templates/VehiclesList2.html'"></ng-include>
</div>
<div ng-switch-when="liste3">
<ng-include src="'templates/VehiclesList3.html'"></ng-include>
</div>
</div>
</div>
</div>
</body>
</html>