PDA

View Full Version : [CLOSED] Grid: Display CommandIcon only on selection



blueworld
Nov 14, 2013, 4:13 PM
Hi,

A commandColumn has a property "OverOnly", this causes the command to appear on mouseover only.

I have a single selection grid, and its very very important to see which column is selected (before doing some action withe a button click)

I need more than just the highlighted background as optical feedback in that case.

Is there a way to display an icon in a commandcolumn if the row is selected?

In other words, I would need the behavior of "OverOnly" for "SelectionOnly" ;)

Baidaly
Nov 14, 2013, 10:39 PM
Hello!

Unfortunately we don't have such functionality but we will discuss it.

Daniil
Nov 15, 2013, 4:11 AM
Hi everybody,

What about the following?

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[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}
</script>

<!DOCTYPE html>

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

<script>
var prepareToolbar = function (grid, toolbar, rowIndex, record) {
return grid.getSelectionModel().isSelected(record);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Height="150">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
<ext:CommandColumn runat="server">
<Commands>
<ext:GridCommand CommandName="testCommand" Icon="Accept" />
</Commands>
<PrepareToolbar Fn="prepareToolbar" />
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single">
<Listeners>
<SelectionChange Handler="this.view.refresh();" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>

blueworld
Nov 15, 2013, 5:06 PM
Thank you Daniil,

i have a about 200 Records in my grid, and unfortunately the browser hangs for a few seconds after each selection.

I have tried it with the more performant ImageCommandColumn, but somehow all rows display the accept icon.

I used the code above, I did only change the colum:



<ext:ImageCommandColumn ID="CommandColumn1" runat="server">
<Commands>
<ext:ImageCommand CommandName="testCommand" Icon="Accept" />
</Commands>
<PrepareCommand Fn="prepareToolbar" />
</ext:ImageCommandColumn>


any idea whats wrong?

Daniil
Nov 15, 2013, 5:15 PM
Yes, a full refresh for such amount of rows is too heavy.

Please try this:

<ext:RowSelectionModel runat="server" Mode="Single">
<Listeners>
<BeforeSelect Handler="var last = this.getLastSelected();

if (last) {
this.view.refreshNode(this.view.store.indexOf(last ));
}" />

<Select Handler="this.view.refreshNode(index);" />
</Listeners>
</ext:RowSelectionModel>