PDA

View Full Version : [CLOSED] Deleting a CommandColumn Icon



xtoolz
Jul 19, 2013, 2:54 PM
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.IsDeletea ble) {
command.iconCls = 'delete';
}
else {
command.iconCls = null;
}

}
};

Seems to be wrong :-/

Any hint ?

Peter

Daniil
Jul 19, 2013, 3:03 PM
Hi Peter,

Please try

command.hidden = true;
instead of

command.iconCls = null;

xtoolz
Jul 22, 2013, 10:35 AM
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

Daniil
Jul 22, 2013, 3: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>

xtoolz
Jul 23, 2013, 7:39 AM
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