0

How to implement a listener to open detail of a grid if the user click on the cell instead of icon

asked 2020-11-17 01:25:44 +0800

softteam gravatar image softteam
120 8

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:

image description

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>
delete flag offensive retag edit

Comments

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

4 Answers

Sort by ยป oldest newest most voted
0

answered 2020-11-25 13:05:54 +0800

hawk gravatar image hawk
2690 1 5
http://hawkphoenix.blogsp... ZK Team

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.

link publish delete flag offensive edit
0

answered 2020-11-26 11:17:59 +0800

hawk gravatar image hawk
2690 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2020-11-27 17:44:44 +0800

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>
link publish delete flag offensive edit
0

answered 2020-11-26 19:16:30 +0800

softteam gravatar image softteam
120 8

updated 2020-11-26 19:23:52 +0800

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

link publish delete flag offensive edit
0

answered 2020-11-27 18:24:57 +0800

hawk gravatar image hawk
2690 1 5
http://hawkphoenix.blogsp... ZK Team

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.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2020-11-17 01:25:44 +0800

Seen: 14 times

Last updated: Nov 27

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More