What's New?

[CLOSED] Deleting a CommandColumn Icon

  1. #1
    Jul 19, 2013, 1:54 PM

    [CLOSED] Deleting a CommandColumn Icon

    Hi all

    I need to set a CommandColumns Icon to Icon 'Delete' for some Records. For others the Icon should be invisible, the CommandColumn should be not available...

    I tired this

    The Markup
             <ext:CommandColumn ID="colDelete" Width="25" runat="server" OverOnly="True" ToolTip="Delete">
            <PrepareToolbar Fn="showDelete" />
            <Commands>
              <ext:GridCommand Icon="Delete" CommandName="cmdDelete" />
            </Commands>
            <Listeners>
              <Command Handler="deleten(command, record);" />
            </Listeners>
          </ext:CommandColumn>
    The JS Code
    var showDelete = function (grid, command, record, row) {
  {
    if (grid.getStore().data.getAt(record).data.IsDeleteable) {
      command.iconCls = 'delete';
    }
    else {
      command.iconCls = null; 
    }

  }
};
    Seems to be wrong :-/

    Any hint ?

    Peter
    Last edited by Daniil; Jul 23, 2013 at 6:41 AM. Reason: [CLOSED]
  2. #2
    Jul 19, 2013, 2:03 PM
    Hi Peter,

    Please try
    command.hidden = true;
    instead of
    command.iconCls = null;
  3. #3
    Jul 22, 2013, 9:35 AM
    Quote Originally Posted by Daniil View Post
    Hi Peter,

    Please try
    command.hidden = true;
    instead of
    command.iconCls = null;
    Hmm, doesn't work for me :-(

    Here's my current Code

    Markup
              <ext:CommandColumn ID="colIsDeleteable" Width="25" runat="server" OverOnly="True" ToolTip="Delete">
            <PrepareToolbar Fn="showDelete" />
            <Commands>
              <ext:GridCommand Icon="Delete" CommandName="cmdDelete"  />
            </Commands>
            <Listeners>
              <Command Handler="delete(command, record);" />
            </Listeners>
            <HeaderItems />
          </ext:CommandColumn>
    JS -> While testing, try to hide all...
    var showDelete = function (grid, command, record, row) {
  {
    command.hidden = true; 
  }
};
    The Delete Icon is always visible...

    Any further hint ?

    Peter
  4. #4
    Jul 22, 2013, 2:37 PM
    The second argument is an entire toolbar (contains all the commands), not a specific command.

    I can suggest this solution.

    Example
    <%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var prepareToolbar = function (grid, toolbar, rowIndex, record) {
            var deleteCommand = toolbar.items.get(0);

            deleteCommand.hide();
            toolbar.setHeight(22); // to avoid decreasing of row height
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                    <ext:CommandColumn runat="server" Width="25" OverOnly="True">
                        <PrepareToolbar Fn="prepareToolbar" />
                        <Commands>
                            <ext:GridCommand Icon="Delete" CommandName="delete" />
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>
  5. #5
    Jul 23, 2013, 6:39 AM
    Quote Originally Posted by Daniil View Post
    The second argument is an entire toolbar (contains all the commands), not a specific command.

    Well, that explains a lot :-)
    Works now - perfect !

    Thanks Daniil

Similar Threads

  1. [CLOSED] Change icon in CommandColumn Listener
    By RRD in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 22, 2013, 8:10 PM
  2. Deleting a row from a GridPanel techniques.
    By chearner in forum 1.x Help
    Replies: 3
    Last Post: Nov 14, 2011, 7:58 PM
  3. [CLOSED] deleting item in combo box
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 09, 2011, 6:03 PM
  4. Deleting row in GridPanel
    By HexElffilter in forum 1.x Help
    Replies: 9
    Last Post: Feb 25, 2011, 4:00 PM
  5. Deleting record from Grid is not working
    By latif in forum 1.x Help
    Replies: 1
    Last Post: Dec 25, 2009, 12:18 PM

Posting Permissions