[CLOSED] grid column rendered and grid comman event

  1. #1

    [CLOSED] grid column rendered and grid comman event

    Hello

    I have generic question, just looking for direction for further investigate
    we would like to have grid with couple of columns and first column would be a link ( i.e would look like hyperlink) and lastcolum "edit" button.
    Now - on clicking edit I can easilly handle "command" event
    I would like to handle same event on clicking a link

    If link is rendered using renderer, is there a way that on click link I can handle command event?
    I know that there is cellclick event, but how to distinguish whether first cell with hyperlink was clicked (or ideally hyperlink itself) or any other cell?

    Idea demonstrate example below ( so on clicking link in first cell I would like to get executed onCommand event)

    Note that ideally if I can do this easilly for all the grids in the app that has edit command in last column and hyperlink in first

    Thanks


    <%@ Page Language="C#" %>
    
    <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},
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47},
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34},
                    new object[] { "American Express Company", 52.55, 0.01, 0.02},
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49},
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54},
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71},
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39},
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04},
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28}
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
       
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            function renderer(value) {
                return '<a href=\'#\'>' + value + '</a>';
            }
            
            var onCommand = function (column, command, record, recordIndex, cellIndex) {
                Ext.Msg.alert('Command', 'Command = ' + command + '<br/>' + 'company = ' + record.get('company'));
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Cell commands"
                Width="700"
                Height="300">
                <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" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
                           <Renderer Fn="renderer"></Renderer>
                        </ext:Column>
    	                <ext:Column runat="server" Text="Price" Width="100" DataIndex="price" Align="End" />
                           
                        <ext:CommandColumn Width="70">
                            <commands>
                                <ext:GridCommand Icon="Lock" CommandName="Edit" Text="<%$ Res:Edit %>">
                                    <ToolTip Text="Edit" />
                                </ext:GridCommand>
                            </commands>
                            <Listeners>
                                <Command Fn="onCommand"/>
                            </Listeners>
    						
                        </ext:CommandColumn>
                        
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                   <ext:RowSelectionModel runat="server" Mode="Multi" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; May 10, 2021 at 11:21 PM.
  2. #2
    Hello @ibrohan!

    If you want to make the cell look like an hyperlink yet do exact the same thing a button would do, why don't do what it says, that is, just change the look of the button to look exactly like an hyperlink would?

    To get started you can try this:

    .link-button {
        text-decoration: underline;
        padding: unset;
        border-width: unset;
        background-color: unset;
        border-style: unset;
    }
    
    .link-button .x-btn-inner-default-toolbar-small {
        color: blue;
    }
    
    .link-button.x-btn.x-btn-pressed.x-btn-default-toolbar-small {
        background-color: unset;
    }
    
    .link-button-hover .x-btn-inner-default-toolbar-small {
        color: darkcyan
    }
    And these CSS rules would be referred to as

    <ext:GridCommand Cls="link-button" OverCls="link-button-hover" CommandName="Edit" Text="Edit">
    You may go ahead with your option with renderer but you'd have to wire events to that rendered a href tag which won't be straightforward.

    Other option would be to use ComponentColumn with the HyperlinkButton. This would ease things a bit as you'd be dealing with Ext JS events instead of raw javascript ones and should have a better time mapping the related record to the click, but you would still need to interface command and link click together, as getting the record won't be the same in a ComponentColumn.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Ok - using css sounds like a good idea, thanks

    is it possible to set text of link ( ie Text property of the GridCommand) to something "dynamical" - i'e. according Grid record data ?
  4. #4
    Hello again, @ibrohan!

    Yes, it is possible, use the PrepareCommand, PrepareCommands or PrepareToolbar directives, whichever fits best your scenario, to do so.

    Here an example exploring this feature: Grid Panel > Commands > Prepare Commands

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Ok clear enough, feel free to close this thread

    Thanks
    Louise
  6. #6
    Thanks for the feedback, glad it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 7
    Last Post: Aug 17, 2016, 7:31 PM
  2. Grid column Sort Ascending event issue
    By Strikers in forum 2.x Help
    Replies: 1
    Last Post: Mar 15, 2016, 6:02 PM
  3. [CLOSED] Row Expander Column Sizing and Grid Event
    By redi in forum 2.x Legacy Premium Help
    Replies: 17
    Last Post: May 22, 2014, 6:17 AM
  4. Replies: 2
    Last Post: Jan 19, 2013, 2:54 AM
  5. Multiple grid should have comman event for toolTip
    By praveencat123 in forum 1.x Help
    Replies: 2
    Last Post: Feb 01, 2012, 1:22 PM

Posting Permissions