[CLOSED] Dynamic grid row command

  1. #1

    [CLOSED] Dynamic grid row command

    Is it possible to define the grid row commands per row? For example, I have 3 available commands but depending on the row, only 2 out of 3 commands should show.
  2. #2

    RE: [CLOSED] Dynamic grid row command

    Hi,

    Here is the sample which shows how to change/hide/add commands depending on data (please update from SVN first if you need to add ImageCommands/CellCommands dynamically (on client side), add/hide/edit ToolbarCommands and hide/edit Image/Cell commands should works without update)

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.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&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"}
                };
    
                this.Store1.DataBind();
                
                ScriptManager1.RegisterIcon(Icon.Accept);
                ScriptManager1.RegisterIcon(Icon.MoneyEuro);
                ScriptManager1.RegisterIcon(Icon.MoneyAdd);
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        
        <script type="text/javascript">
            function prepareToolbar(grid, toolbar, rowIndex, record){
                // for example hide 'Edit' button if price < 50
                if(record.get("price") < 50){
                    //hide separator
                    toolbar.items.itemAt(1).hide();
                    //hide edit button
                    toolbar.items.itemAt(2).hide();
                }
                else{
                    //otherwise add another button
                    toolbar.add(new Ext.Button({
                        iconCls : "icon-accept",
                        command : "accept"
                    }));
                }
            }
            
            //in PrepareCommands we can modify commands collection
            function prepareCommands(grid, commands, record, row) {
                if (record.get("price") >= 50) {
                    commands.push({
                            command    : "accept",                        
                            iconCls    : "icon-accept"                                         
                    });               
                }            
            }
            
            //in PrepareCommand we can modify command
            function prepareCommand(grid, command, record, row) {
                if (command.command == 'Edit' &amp;&amp; record.get("price") < 50) {
                    command.hidden = true;
                    command.hideMode = 'display'; //you can try 'visibility' also                 
                }            
            }
            
            function prepareCellCommand(grid, command, record, row, col, value){
                if (command.command == 'Dollar' &amp;&amp; record.get("price") < 50) {
                    command.iconCls = "icon-moneyeuro";               
                }   
            }
            
            function prepareCellCommands(grid, commands, record, row, col, value){
                if (record.get("price") >= 50) {
                   commands.push({
                       iconCls: "icon-moneyadd",
                       command: "moneyadd"
                   });                
                }   
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <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="n/j h:ia" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                Title="Row commands" 
                Width="800" 
                Height="300"
                AutoExpandColumn="Company">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                        <ext:Column Header="Price" Width="100" Sortable="true" DataIndex="price">
                            <Renderer Format="UsMoney" />
                            
                            <Commands>
                                <ext:ImageCommand Icon="MoneyDollar" CommandName="Dollar"></ext:ImageCommand>
                            </Commands>
                            
                            
                            
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change"/>
                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange"/>
                        <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                            <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />                                              
                        </ext:Column>
                        
                        <ext:ImageCommandColumn Width="100" Header="Image Cmds">
                            <Commands>
                                <ext:ImageCommand Icon="Delete" CommandName="Delete">
                                    <ToolTip Text="Delete" />
                                </ext:ImageCommand>
                                 <ext:ImageCommand Icon="NoteEdit" CommandName="Edit">
                                    <ToolTip Text="Edit" />
                                </ext:ImageCommand>
                            </Commands>
                            
                            
                        </ext:ImageCommandColumn>
                        
                        <ext:CommandColumn Width="100" Header="Toolbar Cmds">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete">
                                    <ToolTip Text="Delete" />
                                </ext:GridCommand>
                                <ext:CommandSeparator />
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                    <ToolTip Text="Edit" />
                                </ext:GridCommand>
                            </Commands>
                            
                        </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>
  3. #3

    RE: [CLOSED] Dynamic grid row command

    Thanks. This worked perfectly. If my grid command contains a submenu, does it create and render a menu per row? Or does all rows share the same menu?
  4. #4

    RE: [CLOSED] Dynamic grid row command

    Hi,

    All rows will have commands which are added on server side. All changes which you make in javascript prepare function will affect on current row (changes on client side don't shared between rows)
  5. #5

    RE: [CLOSED] Dynamic grid row command

    I was more concerned about clientside performance. If each grid command has its own menu instance, 200 rows = 200 menus. If the menus all have the same buttons, it would be nice to be able to share one menu. If I want dynamic menu items, I want to be able to hide/show them before the menu opens.
  6. #6

    RE: [CLOSED] Dynamic grid row command

    Hi,

    Thanks for suggestion. I think it is possible to share menu. Let me think about it. I'll answer in this topic when will be ready
  7. #7

    RE: [CLOSED] Dynamic grid row command

    Hi,

    We added new property for CommandMenu
    Shared


    No if Shared="true" then only one instance of the menu is created for all rows


    Also we added Handler property for the MenuCommand, you can set javascript handler direclty for each command (without Command event handle). To get record in that handler just call 'this.getRecord()'


    New functionality is avaliable in 1.0 version only

Similar Threads

  1. Replies: 0
    Last Post: May 12, 2012, 12:24 PM
  2. Replies: 12
    Last Post: Sep 20, 2011, 3:33 PM
  3. [CLOSED] Dynamic RowExpander With Gridpanel using Command Buttons
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 08, 2011, 3:49 PM
  4. Replies: 0
    Last Post: Mar 04, 2011, 7:46 AM
  5. Grid Command
    By marciocxs in forum 1.x Help
    Replies: 1
    Last Post: Apr 14, 2009, 6:27 PM

Posting Permissions