[CLOSED] How to prevent selecting a Gridpanel row when clicking on a link that is inside that row

  1. #1

    [CLOSED] How to prevent selecting a Gridpanel row when clicking on a link that is inside that row

    Hi,

    We are using Ext.Net 2.5 version, facing one issue with hyperlink on Gridpanel. When we click on hyperlink on grid panel the row selection is losing. Example, if a row selected already, click on link the row should NOT change the selection, if row selected that should be as it is when click on Link.

    Please see the example code below and suggest the solution asap.

    <%@ 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" },
                    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 & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & 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 & 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 & 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" }
                };
    
                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) {
                window.open(paymentsPageLinkURL);
                return false;
            }
        </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" />
                </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 fabricio.murta; Sep 22, 2017 at 8:58 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @iansriley!

    Would you mind reviewing your post and wrapping code blocks in [code][/code] tags, according to our Forum Guidelines For Posting New Topics?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Done, please check now.

    Thank you.
  4. #4
    Hello @iansriley!

    You code has errors, please try to run that on Visual Studio and you should easily see it. As per our More Information Required guidelines, we should be able to run your code without modification (run as much as it is necessary to reproduce the issue you're talking about) and I don't even see links inside the grid rows. Maybe you happened to copy paste the wrong test case in the initial post?

    Looking forward to your follow-up so we can help you with the issue you're facing.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    <%@ 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" },
                    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 & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonalds Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & 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 & 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" }
                };
    
                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 + "%");
            };
    
            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) {
                window.open(paymentsPageLinkURL);
                return false;
            }
        </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>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server" Mode="Simple" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
                </View>
               
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by iansriley; Jul 17, 2017 at 4:51 PM. Reason: Please check now
  6. #6
    Hello @iansriley!

    Now that's more like it, the sample ran smoothly and I could find an alternative for you.

    Actually, it should be possible to do from plain javascript, but I don't think this should be the goal using Ext.NET and/or ExtJS, should it be? Specially when there's a supported feature that does that for you!

    Yes, I'm pretty confident you are looking to the command feature of a grid column. And here's how you can change the price column to have it working.

    Notice I changed the code to just show an alert message (so that it does not open a new tab) but, that's encapsulated on a full Listener, and you can enjoy all programming you can do with a listener so, I don't think you're going to find a bad limitation of sorts to it.

    <ext:Column ID="PriceColumn" runat="server" Text="Price" Width="75" DataIndex="price">
        <Renderer Handler="return '';" />
        <Commands>
            <ext:ImageCommand CommandName="DoMyClick" />
        </Commands>
        <PrepareCommand Handler="command.text='<a href=\'#\'>' + value + '</a>';" />
        <Listeners>
            <Command Handler="Ext.Msg.alert('column', 'click');" />
        </Listeners>
    </ext:Column>
    In fact, you could just let it print the values (do not add any renderer, remove line 2 on my code above), remove also the PrepareCommand line (line 6) and just use <ext:ImageCommand CommandName="DoMyClick" Icon="Link" Text="Open" />.

    When wrapped in the command concept, the row selection/deselection on the command-handled cell won't be triggered. To be more specific, the selection will not be triggered as long as the interaction is with the actual command button/image/text (not cell text, that's why I've set the code above to do the ordinary render as an empty cell).

    More on that can be found on this example: https://examples2.ext.net/#/GridPane.../Cell_Command/

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello @iansriley!

    It's been a while since we last replied you here in this thread and still no feedback from you. Do you still need help with this issue? Or rather, did our last reply help at all?

    We may mark this thread as closed if you don't reply in 7+ days from now, but that is not going to "lock up" the thread, so if you happen to be able to post a feedback only after this, it will still be okay.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Jun 20, 2017, 5:34 PM
  2. [CLOSED] Prevent user from selecting the highlighted item Bound list by TAB
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 29, 2014, 7:30 AM
  3. Replies: 1
    Last Post: Sep 08, 2013, 5:10 AM
  4. Replies: 0
    Last Post: Sep 08, 2011, 9:59 AM
  5. Replies: 0
    Last Post: Jul 26, 2011, 4:57 PM

Tags for this Thread

Posting Permissions