[CLOSED] GridPanel - change look/content of Columns/CommandColumn based on row data?

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] GridPanel - change look/content of Columns/CommandColumn based on row data?

    Hey,
    I have a button as a CommandColumn in a GridPanel.

    Depending on what values the row has, the CommandColumn (GridCommand) should be visible or not visible.

    I am using the GetRowClass-thing to set background on rows depending on values of the Row, but can I altogether remove the Gridcommand/button for just that row and replace with something else, or perhaps disable the button/GridCommand?
    Last edited by Daniil; May 05, 2011 at 7:52 AM. Reason: [CLOSED]
  2. #2
  3. #3
    Thanks. that helped.

    So I return false, and the command buttons go away. Can I replace that space that was used by the buttons with lets say some text? =)

    i tied this:

    var prepare = function (grid, toolbar, rowIndex, record) {
                if (record.data.BookingState == "MyStatus") {
                    toolbar.items.get(0).hide();
                    toolbar.add(new Ext.Label({
                        text: "Test"
                    }));
                }
            };
    EDIT:

    This code hid the button, but no other button was added:
    var prepare = function (grid, toolbar, rowIndex, record) {
        if (record.data.BookingState == "MyStatus") {
            toolbar.items.itemAt(0).hide();
            toolbar.add(new Ext.Button({
                icon: "Accept",
                command: "accept"
            }));
        }
    };
  4. #4
    Please provide a full sample to reproduce.
  5. #5
    I just wanted to know if its possible to add some text instead, then if I cant get it working I'll post a runnable example.

    Am I at all thinking of it the right way?
  6. #6
    Generally, Label is a good attempt to achieve the requirement.
  7. #7
    Hey!
    So here is a runnable example.

    I expect there to be another button with the "accept" icon in the Rows where State == "Stopped". But there are none. And no javascript errors.

    What am I missing? =)


    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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>Ext.Net Example</title>
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    List<object> obs = new List<object>();
                    obs.Add(new object[] { 1, "Name1", "Started" });
                    obs.Add(new object[] { 2, "Name2", "Stopped" });
                    obs.Add(new object[] { 3, "Name3", "Started" });
                    obs.Add(new object[] { 4, "Name4", "Stopped" });
    
                    Store1.DataSource = obs.ToArray();
                    Store1.DataBind();
                }
            }
        </script>
        <script language="javascript" type="text/javascript">
            var prepare = function (grid, toolbar, rowIndex, record) {
                if (record.data.State == "Stopped") {
                    toolbar.items.itemAt(0).hide();
                    toolbar.add(new Ext.Button({
                        icon: "Accept",
                        command: "accept"
                    }));
                }
            };
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
             
             <ext:GridPanel ID="GridPanel1" runat="server" Title="Test" AutoHeight="true" AutoWidth="true">
                <Store> 
                    <ext:Store ID="Store1" runat="server" >
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="Id" Type="Int"></ext:RecordField>
                                    <ext:RecordField Name="Name"></ext:RecordField>
                                    <ext:RecordField Name="State"></ext:RecordField>
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="Id" ColumnID="Id" DataIndex="Id" Width="80"/>
                        <ext:Column Header="Name" DataIndex="Name" />
                        <ext:Column Header="State" DataIndex="State"  Width="60"/>
                        <ext:CommandColumn Width="110" Header="Command">
                            <Commands>
                                <ext:GridCommand Icon="Cancel" CommandName="Cancel" Text="Stop"></ext:GridCommand>
                            </Commands>
                            <PrepareToolbar Fn="prepare" />
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
     
        </form>
    </body>
    </html>
  8. #8
    Thanks for the sample.

    Well, your code should work and we are investigating.

    I also discovered this issue is also reproducible here:
    https://examples1.ext.net/#/GridPane...pare_Commands/

    See the last column, there is no "accept" button, but it should be in some rows.
  9. #9
    Thanks Daniil, I'll wait and see what you guys come up with =)
  10. #10
    Well, .doLayout() for toolbar make sense.
    toolbar.doLayout();
    And, please use
    iconCls: "icon-accept"
    instead of
    icon: "accept"
    and register the icon:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ResourceManager1.RegisterIcon(Icon.Accept);
        }
    }
Page 1 of 2 12 LastLast

Similar Threads

  1. Change input type based on data type
    By bjones in forum 1.x Help
    Replies: 5
    Last Post: Jan 06, 2012, 9:54 AM
  2. Replies: 5
    Last Post: Jul 28, 2011, 6:30 PM
  3. Replies: 1
    Last Post: Jun 02, 2011, 9:19 PM
  4. GridPanel Row Formating based on Data
    By vivekrane1986 in forum 1.x Help
    Replies: 0
    Last Post: Jun 08, 2010, 7:15 AM
  5. Replies: 2
    Last Post: Mar 04, 2009, 4:28 PM

Tags for this Thread

Posting Permissions