[CLOSED] Dynamically change CommandColumn properties

  1. #1

    [CLOSED] Dynamically change CommandColumn properties

    Hi folks,

    I have these commands in a gridpanel.

    I need to change Icon from Pencil to Lock and CommandName="edit_command" to CommandName="editionpassword_command" according
    record.data.Protegido == 'P'

    Please can you help me?

    Cheers!!

                    <ext:CommandColumn Width="50">
                        <Commands>
                            <ext:GridCommand Icon="Pencil" CommandName="edit_command">
                                <ToolTip Text="Seleccionar" />
                            </ext:GridCommand>
                            <ext:GridCommand Icon="Delete" CommandName="delete_command">
                                <ToolTip Text="Borrar" />
                            </ext:GridCommand>
                        </Commands>
                    </ext:CommandColumn>
    Last edited by Daniil; Nov 13, 2012 at 2:42 PM. Reason: [CLOSED]
  2. #2
    Hi @digitek,

    Please set up a PrepareToolbar handler. Here is an example.
    https://examples1.ext.net/#/GridPane...epare_Toolbar/

    To change an icon please use setIconCls method.
  3. #3
    Daniil,

    based in your example I have changed this part of the code:

            var prepare = function (grid, toolbar, rowIndex, record) {
                var firstButton = toolbar.items.get(0);
    
                if (record.data.price < 50) {
                    //this is the new line : add build-in Lock icon
                    firstButton.setIconCls("lock"); 
    
                    firstButton.setDisabled(true);
                    firstButton.setTooltip("Disabled");
                }
    I'm getting "Runtime Error in Microsoft JScript: Object does not support property or method 'setIconCls'"

    These are my versions:
    Ext.Ner.dll -> 1.1.0.41789
    Ext.Net.Utilities.dll -> 1.1.0.41784
    Newtonsoft.Json.dll -> 3.5.0.0

    Tested with last 1.5.0 release and the issue is the same:
    Ext.Ner.dll -> 1.5.0.0
    Ext.Net.Utilities.dll -> 1.3.0.39155
    Ext.Net.Utilities.dll -> 3.5.0.0
    Newtonsoft.Json.dll -> 4.0.8.0

    Please can you help me?

    Cheers
    Last edited by digitek; Nov 13, 2012 at 12:56 PM.
  4. #4
    Apologize, it should be "setIconClass".

    Also please use "icon-lock" instead of "lock". This icon (i.e. its CSS class) must be registered before using it.
  5. #5
    Now works !!

    This is the final 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" },
                    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" }
                };
    
                this.Store1.DataBind();
                
                //CHANGED
                ResourceManager1.RegisterIcon(Icon.Lock);
            }
        }
    </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 id="Head1" runat="server">
        <title>Prepare Toolbar - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            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 prepare = function (grid, toolbar, rowIndex, record) {
                var firstButton = toolbar.items.get(0);
    
                if (record.data.price < 50) {
                    //CHANGED
                    firstButton.setIconClass("icon-lock");
                    firstButton.setDisabled(true);
                    firstButton.setTooltip("Disabled");
                }
    
                //you can return false to cancel toolbar for this record
            };       
        </script>
    
    </head>
    <body>
        <form id="Form1" runat="server">
    
            <!--CHANGED -->
            <ext:ResourceManager runat="server" ID="ResourceManager1" />
            
            <h1>Prepare Toolbar</h1>
            
            <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>
     
            <ext:GridPanel 
                runat="server" 
                StoreID="Store1" 
                Title="Prepare toolbar" 
                Width="600" 
                Height="300"
                AutoExpandColumn="Company">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                        <ext:Column Header="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" />
                        <ext:CommandColumn Width="110">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete" Text="Delete" />
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit" Text="Edit" />
                            </Commands>
                            <PrepareToolbar Fn="prepare" />                        
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                </SelectionModel>
                <Listeners>
                    <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                </Listeners>
            </ext:GridPanel>  
        </form>
    </body>
    </html>
    Thanks a lot!!!

Similar Threads

  1. [CLOSED] How to change the css class properties dynamically
    By ISI in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 04, 2011, 10:26 AM
  2. Change Plugin Properties Dinamically
    By David Pelaez in forum 1.x Help
    Replies: 7
    Last Post: May 18, 2011, 3:35 PM
  3. Replies: 12
    Last Post: May 05, 2011, 6:21 AM
  4. Change Plugin Properties Dinamically
    By David Pelaez in forum 1.x Help
    Replies: 1
    Last Post: Dec 16, 2010, 12:09 PM
  5. [CLOSED] Change Tab Name dynamically in Tab Control
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 19, 2009, 2:45 AM

Posting Permissions