The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Regarding ext.net 2.5 Grid Panel checkselect, [bubble event cancelling] while clicking on a url.

  1. #1

    Regarding ext.net 2.5 Grid Panel checkselect, [bubble event cancelling] while clicking on a url.

    Hi All

    I have a grid panel displaying certain records. In the second column I have records acting as urls to open new window(am doing via javascript function call). But when am clicking on the value , by default that particular row checkbox is getting selected which I don't want. I have tried using event.stopPropagation() and cancel bubble, but it seems 2.5 EXT.NET is not supporting. Kindly help!


    Please find below my code;

    <%@ Page Language="C#" %>

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!X.IsAjaxRequest)
    {
    this.Store1.DataSource = new object[]
    {
    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },

    };

    this.Store1.DataBind();
    }
    }

    protected void ToggleChange(object sender, DirectEventArgs e)
    {
    Ext.Net.Button button = sender as Ext.Net.Button;
    this.GridPanel1.ColumnModel.Columns[2].Hidden = button.Pressed;
    button.Text = button.Pressed ? "Show Change" : "Hide Change";
    }

    protected void ChangeHeader(object sender, DirectEventArgs e)
    {
    Ext.Net.Button button = sender as Ext.Net.Button;
    this.GridPanel1.ColumnModel.Columns[0].Text = "New label";
    button.Disabled = true;
    }

    protected void ChangeWidth(object sender, DirectEventArgs e)
    {
    Ext.Net.Button button = sender as Ext.Net.Button;
    this.GridPanel1.ColumnModel.Columns[1].Width = 100;
    button.Disabled = true;
    }

    protected void ChangeRenderer(object sender, DirectEventArgs e)
    {
    Ext.Net.Button button = sender as Ext.Net.Button;
    Renderer r = new Renderer();
    r.Fn = "change";
    this.GridPanel1.ColumnModel.Columns[2].Renderer = r;
    button.Disabled = true;
    }
    </script>

    <!DOCTYPE html>

    <html>
    <head runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <script>
    var template = '<span style="color:{0};">{1}</span>';

    var change = function (value) {
    return Ext.String.format(template, (value > 0) ? "green" : "red", value);
    };

    var pctChange = function (value) {
    return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
    };
    var testHand = function (a, b, c, d, e) {
    alert(a);
    }

    function paymentsOpenLinkRenderer(value, metadata, record, rowIndex, action) {

    var amountWithFormat = value;
    var paymentsPageLinkURL = Ext.String.format('https://www.google.co.in/#q={0}', record.data.company);
    return Ext.String.format("<a href='#' onclick="return openPaymentDetailsWindow('{0}');">{1}<a/>", paymentsPageLinkURL, amountWithFormat)
    }
    function openPaymentDetailsWindow(paymentsPageLinkURL) {

    alert("start");

    event.stopPropagation();
    alert("stop propagation is called");
    window.open(paymentsPageLinkURL, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500, left=500,width=400,height=400");
    return false;
    }

    function StopSelection(value, metadata, record, rowIndex, action) {
    if (p2) {
    return false;
    }
    }

    var testSelChange = function (p1, p2, p3, p4, p5, p6) {
    //alert('selection change');
    }
    function testselect() {
    var values = GridPanel1.getRowsValues(
    {
    filterField: function (record, fieldName, value) { return fieldName === "Price"},
    selectedOnly: true,
    currentPageOnly: false
    });
    ////this method should be complete
    }
    function cancelBubble(e) {

    alert("went inside");
    var evt = e ? e : window.event;
    if (evt.stopPropagation) evt.stopPropagation();
    if (evt.cancelBubble != null) evt.cancelBubble = true;
    }

    </script>

    </head>
    <body>
    <form runat="server">
    <ext:ResourceManager runat="server" />

    <h1>Columns model ajax operation</h1>

    <ext:GridPanel
    ID="GridPanel1"
    runat="server"
    Title="Array Grid"
    Width="600"
    Height="350">
    <Store>
    <ext:Store ID="Store1" runat="server">
    <Model>
    <ext:Model runat="server">
    <Fields>
    <ext:ModelField Name="company" />
    <ext:ModelField Name="price" Type="Float"/>
    <ext:ModelField Name="change" Type="Float" />
    <ext:ModelField Name="pctChange" Type="Float" />
    <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
    </Fields>
    </ext:Model>
    </Model>
    </ext:Store>
    </Store>
    <ColumnModel runat="server">
    <Columns>
    <ext:Column ID="CompanyColumn" runat="server" Text="Company" Width="160" DataIndex="company" Flex="1" />
    <ext:Column ID="PriceColumn" runat="server" Text="Price" Width="75" DataIndex="price">
    <Renderer Handler="return paymentsOpenLinkRenderer(value, metadata, record,rowIndex,'payment');"/>
    </ext:Column>
    <ext:Column ID="ChangeColumn" runat="server" Text="Change" Width="75" DataIndex="change" />
    <ext:Column ID="ChangePrtColumn" runat="server" Text="Change %" Width="75" DataIndex="pctChange" />
    <ext:DateColumn ID="LastChangeColumn" runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" />
    </Columns>
    <Listeners>
    <HeaderClick Handler="testHand" />

    </Listeners>
    </ColumnModel>
    <SelectionModel>
    <ext:CheckboxSelectionModel runat="server" Mode="Simple" ID="chkSelModel">

    <%-- <Listeners>
    <Select Fn="testselect">
    </Select>
    </Listeners>--%>
    </ext:CheckboxSelectionModel>

    </SelectionModel>
    <View>
    <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
    </View>
    <BottomBar>
    <ext:Toolbar runat="server">
    <Items>
    <ext:ToolbarFill runat="server" />
    <ext:Button
    runat="server"
    Text="Change Header">
    <DirectEvents>
    <Click OnEvent="ChangeHeader" Single="true" />
    </DirectEvents>
    </ext:Button>

    <ext:Button
    runat="server"
    Text="Change Width">
    <DirectEvents>
    <Click OnEvent="ChangeWidth" Single="true" />
    </DirectEvents>
    </ext:Button>

    <ext:Button
    runat="server"
    Text="Change Renderer">
    <DirectEvents>
    <Click OnEvent="ChangeRenderer" Success="#{GridPanel1}.getView().refresh(false);" />
    </DirectEvents>
    </ext:Button>

    <ext:Button
    runat="server"
    Text="Hide 'Change'"
    EnableToggle="true"
    OnDirectClick="ToggleChange"
    />
    </Items>
    </ext:Toolbar>
    </BottomBar>
    </ext:GridPanel>
    </form>
    </body>
    </html>
    Last edited by devashissatapathy; Jun 16, 2017 at 7:05 AM.

Similar Threads

  1. Replies: 0
    Last Post: Oct 08, 2012, 7:33 AM
  2. Replies: 4
    Last Post: Jan 16, 2012, 12:14 AM
  3. Replies: 2
    Last Post: May 30, 2011, 5:53 AM
  4. Replies: 6
    Last Post: Mar 26, 2011, 2:03 PM
  5. [CLOSED] moveable bubble panel?
    By dev in forum 1.x Premium Help
    Replies: 7
    Last Post: Mar 24, 2011, 3:31 PM

Tags for this Thread

Posting Permissions

Subscribe now to get the latest Ext.NET happenings in our newsletter.