Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I got a grid with a detail and I would like to know how can I implement a listener to throw onOpen method if user clicks any part of the selector cell, not necessarily on the icon.
I attach an image:
Some code:
<grid id="GRIDCenso">
<columns menupopup="auto-keep" sizable="true">
<column width="40px" label="Selector" sclass="hiddenSelector"/>
<column id="CLCama" label="_Cama"/>
<column id="CLNHC" label="_NHC"/>
<column id="CLNombrePaciente" label="_Nombre paciente"/>
<column id="CLEdad" label="_Edad"/>
</columns>
<rows >
<template name="model" var="item" visible="false">
<row value="@load(item)" onClick="@command('SeleccionRowEstilo',evento=event.getTarget())">
<detail open="false" onCustom="@command('abrirDetalle',evento=event.getTarget())" >
</detail>
</row>
</template>
</rows>
</grid>
If the requirement is: open the detail when a user clicks a row Here is a way:
<zk xmlns:w="client">
....
<row onClick="self.firstChild.open=!self.firstChild.open">
<detail w:_doClick="function(){}">
Because clicking the angle icon still fires onOpen and onClick, we need to make it do nothing. Or it will open/close at the same time when you click the angle icon.
If you just want to allow users to click the cell enclosing the angle icon to open a <detail>. You can register a client listener like:
<zk xmlns:w="client">
...
<detail w:onBind="this.domListen_(jq('.z-detail-outer', this.parent).get(), zk.mobile ? 'onTouchstart' : 'onClick', '_doClick');" onOpen="@command('cmd')">
Turn mouse as a pointer icon when hovering on the detail cell:
<style>
.z-detail-outer{
cursor: pointer;
}
</style>
Hi,
What I want to do is "allow users to click the cell that closing the angle icon to open a <detail>."
I have a Custom event to open and close the detail (if detail is open, this event only close this detail):
<script><![CDATA[
zk.afterLoad("zkex.grid", function () {
var _xDetail = {};
zk.override(zkex.grid.Detail.prototype, _xDetail, {
_doClick: function() {
this.fire("onCustom", {
open: !this._open,
},{toServer:true});
}
});
});
]></script>
Now in <detail> I have:
<detail open="false" onCustom="@command('abrirDetalle',evento=event.getTarget())" w:onBind="this.domListen_(jq('.z-detail-outer', this.parent).get(), zk.mobile ? 'onTouchstart' : 'onClick', '_doClick');">
But my problem is that if I click on the cell (not the angle icon) everything works fine, but now if I click on the angle icon the onCustom event is triggered 2 times.
Any piece of advice?
Thank you,
Javier
Then we need to remove the onclick listener on .z-detail.
<script><![CDATA[
function replaceOnClickListener(){
var widget = this;
zk.afterMount(function () {
widget.domUnlisten_(widget.$n(), zk.mobile ? 'onTouchstart' : 'onClick', '_doClick');
}, 50);
this.domListen_(this.$n('chdextr'), zk.mobile ? 'onTouchstart' : 'onClick', '_doClick');
}
]]></script>
<detail w:onBind="replaceOnClickListener.bind(this)()" onOpen="">
But I think firing onCustom event is not required. You can invoke a command at onOpen.
Asked: 2020-11-17 01:25:44 +0800
Seen: 20 times
Last updated: Nov 27 '20
I'm not sure what you want. Is this your requirement, open the detail when a user clicks a row?
hawk ( 2020-11-25 12:47:48 +0800 )edit