What's New?

[CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

  1. #1
    May 13, 2010, 6:10 PM

    [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    Using various code found on the site I have been able to add a renderer to a column that is a hyperlink. I have also added js that when you click on the cell it will show a Ext.net.Mask.show({ msg: 'Please Wait...' }); while it is redirecting.

    Clicking on the hyperlink works great. The Please Wait message shows and the page is redirected.

    The issue is when the cell is clicked but not the hyperlink. The mask still shows but will never go away. see attached image CellClick.png- clicking in the green area causes the problem.

    I have tried adding a class to the hyperlink and then using a resource manager custom listener 

                
<ext:Listener Handler="PageLoadMask(false);" Target="${a.linkPleaseWait}" HtmlEvent="Click"   />
    Looking at view source I can see the custom listener - but it never fires

    Ext.net.on(Ext.select("a.linkPleaseWait"),"click",{fn:function(){debugger; PageLoadMask(false);}}, this, "client");})
    I look forward to being amazed at how simple of answer this will no doubt be.

    Thanks~
  2. #2
    May 13, 2010, 6:19 PM

    RE: [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    Hi,

    Please demosntrate hyperlink renderer and how you attach click handler to the hyperlink
  3. #3
    May 14, 2010, 2:26 PM

    RE: [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    I think this will help figure it out.

    "Link 1 Click Me" - does not cause an alert from the listener - works as expected
    "Link 2 Click Me" - causes an alert from the listener - works as
    expected


    Click any link in the grid and it does not get an alert from listener - I would expect it to work like "Link 2 Click Me"

    Uncomment the listener for the div and clicking in a grid cell causes the listener to get called multiple times.

    It appears that the ${} token does not work for every element of the grid.

    Mark-up:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <style type="text/css">
        .linkPleaseWait{color: Olive ;}
    </style>
    
    <script type="text/javascript">
        var template = '{1}';

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

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

        var linkRenderer = function (value) {
            return String.format('<a href="http://www.google.com" class="linkPleaseWait">{0}</a>', value);
        }

        function PageLoadMask() {
            alert('Something was clicked that made me show up');            
            // show the loading mask
//            Ext.net.Mask.show({ msg: 'Please Wait...' });
        }        
        
    </script>
    
</head>
<body style="height:300">
    <form id="form1" runat="server">
    
    <ext:ResourceManager ID="ResourceManager1" runat="server" >
        <CustomListeners>
            <%--Attempts to get it to fire--%>
            <ext:Listener Handler="PageLoadMask();" HtmlEvent="Click" Target="${a.linkPleaseWait}" />
            <%-- Un comment this and then click cells in the grid and will cause alert --%>
            <%--<ext:Listener Handler="PageLoadMask();" HtmlEvent="Click" Target="${div}" />--%>
        </CustomListeners>
    </ext:ResourceManager>

    <br />
    <br />
        <a href="http://www.google.com" >Link 1 Click Me = This is a test to see if the link will cause an alert. No Class added</a>
    <br />
    <br />
        <a href="http://www.google.com" class="linkPleaseWait" >Link 2 Click Me =  This is a test to see if the link will cause an alert. This has the same class as the grid</a>
    <br />
    <br />

 <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        StripeRows="true"
        Title="Array Grid" 
        TrackMouseOver="true"
        Width="600" 
        Height="350"
        AutoExpandColumn="Company">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                <ext:Column Header="Price" DataIndex="price">
                    <Renderer Fn="linkRenderer" />
                </ext:Column>
                <ext:Column Header="Change" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column Header="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>
    </ext:GridPanel>          

    
    </form>
</body>
</html>
    code-behind:

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Me.GridPanel1.Store.Primary.DataSource = LoadGridData
        Me.GridPanel1.Store.Primary.DataBind()

    End Sub

    Private ReadOnly Property LoadGridData() As Object()
        Get
            Return New Object() _
                {New Object() {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"}, _
                New Object() {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"}, _
                New Object() {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am"}, _
                New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"}}

        End Get
    End Property
    Thanks!
  4. #4
    May 16, 2010, 3:01 PM

    RE: [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    Hi,

    Please see the following sample
    <%@ Page Language="C#" EnableViewState="false" %>

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.Store.Primary;
            
            object[] data = 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&amp;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" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
            
            store.DataSource = data;
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .linkPleaseWait
        {
            color: Olive;
        }
    </style>

    <script type="text/javascript">
        var template='{1}';

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

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

        var linkRenderer=function(value, meta, record) {
            return String.format('<a href="javascript:linkClickHandler(\'{1}\');" class="linkPleaseWait">{0}</a>',value, record.id);
        };
        
        var linkClickHandler = function(recordId){
            alert("Price="+Store1.getById(recordId).data.price)
        };
    </script>

</head>
<body style="height: 300">
    <form id="form1" runat="server">
    
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        
        <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
            TrackMouseOver="true" Width="600" Height="350" AutoExpandColumn="Company">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                                <ext:RecordField Name="change" Type="Float" />
                                <ext:RecordField Name="pctChange" Type="Float" />
                                <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                    <ext:Column Header="Price" DataIndex="price">
                        <Renderer Fn="linkRenderer" />
                    </ext:Column>
                    <ext:Column Header="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column Header="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
        </ext:GridPanel>
    
    </form>
</body>
</html>
  5. #5
    May 17, 2010, 11:06 AM

    RE: [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    a couple of changes to get this to do what I needed:

    the linkRenderer href requires in front of the function name

            var linkRenderer = function(value, meta, record) {
            return String.format('<a href="linkClickHandler(\'{1}\');" >{0}</a>', value, 'http://www.google.com');
        };
    Passing the url into the handler function and then setting the window location

            var linkClickHandler = function(url) {
            // show the loading mask
            Ext.net.Mask.show({ msg: 'Please wait...' });
            window.location = url;
        };
    Thank you for pointing me in the right direction. This can be marked as solved.
  6. #6
    May 17, 2010, 11:07 AM

    RE: [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    Sorry for that first section of code I copied the wrong one. This is what the linkRenderer should look like:

            var linkRenderer = function(value, meta, record) {
            return String.format('<a href="linkClickHandler(\'{1}\');" class="linkPleaseWait">{0}</a>', value, 'http://www.google.com');
        };
  7. #7
    May 17, 2010, 11:09 AM

    RE: [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    ok - I didn't copy it wrong it is removing it. when the post is saved. In front of the linkClickHandler add ''
  8. #8
    May 17, 2010, 11:10 AM

    RE: [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    Hi,

    In my original example renderer adds javascript: before linkClickHandler in the href (just forum engine eats that prefix)
  9. #9
    May 17, 2010, 11:11 AM

    RE: [CLOSED] [1.0] How to limit execution of s Mask.show in a Grid Column / Cell Click

    Thank you for adding that Vladsch!

Similar Threads

  1. Is it possible to have both cell click and row command event of grid-panel together in same grid
    By Dorababu in forum 1.x Help
    Replies: 0
    Last Post: May 12, 2012, 11:24 AM
  2. [CLOSED] ShowMask + Show Mask in GridPanel on Sorting Column
    By Zarzand in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 10, 2011, 12:17 AM
  3. How do I show the mask Button.Listener.Click event?
    By relativ in forum 1.x Help
    Replies: 10
    Last Post: Aug 18, 2010, 2:22 AM
  4. [CLOSED] Trigger with Grid Panel Show Mask Problem
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 11, 2010, 2:37 PM
  5. [CLOSED] on click cell in grid row removed
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 29, 2009, 1:30 AM

Posting Permissions