Prevent event propagation on inner container

  1. #1

    Prevent event propagation on inner container

    Hello,

    I haven't tried everything, but have so far tried a lot of choices with no luck. Actually I could make it on sprites, not on buttons which I can nicely format using the UI= directives.

    Thing is: I have a big click area but want from a given container in to ignore the general click event so I can use an exclusive there.

    I want that the user may be able to click the entire entry to show its details, except for a box with different detail buttons.

    In my example, I want the 'area click' event to be triggered everywhere else but into the pnlX panel. I kind of require building the screen from code behind so...

    eventPropagationHandling.aspx.cs
    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    using x = Ext.Net;
    
    namespace ExtNetPlayground
    {
        public partial class eventPropagationHandling : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                var lbl1 = new x.Label
                {
                    Text = "Word 001 (clickable)",
                    Margin = 2
                };
                var lbl2 = new x.Label
                {
                    Text = "Word 002 (clickable)",
                    Margin = 2
                };
    
                var ctn1 = new x.Container
                {
                    Layout = "HBoxLayout",
                    Items = { lbl1, lbl2 }
                };
    
                var btnZ = new x.Button
                {
                    UI = x.UI.Primary,
                    Text = "Button 1",
                    OnClientClick = "alert('Button 1 click event.');"
                };
                var btnX = new x.Button
                {
                    UI = x.UI.Primary,
                    Text = "Button 2",
                    OnClientClick = "alert('Button 2 click event.');"
                };
    
                var pnlX = new x.Panel
                {
                    UI = x.UI.Primary,
                    Frame = true,
                    Padding = 2,
                    Items = { btnZ, btnX },
                };
    
                var clickBlock = new x.Container
                {
                    ID = "ckBk",
                    Layout = "VBoxLayout",
                    Items = { ctn1, pnlX },
                    StyleSpec = "border: solid 1px gray"
                };
    
                var fnAlert = new x.JFunction { Handler = "alert('area click event triggered');" };
                clickBlock.Element.AddListener("click", fnAlert);
    
                pn1.Items.Add(clickBlock);
            }
        }
    }
    eventPropagationHandling.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="eventPropagationHandling.aspx.cs" Inherits="ExtNetPlayground.eventPropagationHandling" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" /> 
            <ext:Panel runat="server" ID="pn1" Height="600" />   
        </div>
        </form>
    </body>
    </html>
    I can't see a light in the other end of this dark bluish UI=Primary tunnel...

    p.s.: nice new forum layout! subtle yet comfortable!
  2. #2
    Why asking is so self-solving?..

    If I set an ID to pnlX (ID="bleh") and
    pnlX.Element.AddListener("click", new JFunction { Args = new string[] { "e" }, Handler = "e.stopEvent();" });
    after its definition, it works.

                var pnlX = new x.Panel
                {
                    ID="bleh",
                    UI = x.UI.Primary,
                    Frame = true,
                    Padding = 2,
                    Items = { btnZ, btnX },
                };
                pnlX.Element.AddListener("click", new JFunction { Args = new string[] { "e" }, Handler = "e.stopEvent();" });
    For some reason in the big project the missing ID did not trigger an error. I am purposely avoiding to set IDs where I am not going to interact with to avoid leaving unused 'handles' throughout the code.

Similar Threads

  1. Prevent grid reload on filter update/activate event
    By alexanderius in forum 2.x Help
    Replies: 3
    Last Post: Jun 09, 2014, 11:46 AM
  2. Replies: 3
    Last Post: Oct 23, 2013, 3:30 PM
  3. Replies: 4
    Last Post: Apr 30, 2012, 4:49 PM
  4. Replies: 1
    Last Post: Jan 19, 2012, 4:20 PM
  5. [CLOSED] Prevent checkbox from executing event
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 19, 2011, 3:15 AM

Tags for this Thread

Posting Permissions