[CLOSED] Grid: Display CommandIcon only on selection

  1. #1

    [CLOSED] Grid: Display CommandIcon only on selection

    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" ;)
    Last edited by Daniil; Nov 22, 2013 at 4:09 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Unfortunately we don't have such functionality but we will discuss it.
  3. #3
    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>
  4. #4
    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?
  5. #5
    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>

Similar Threads

  1. Replies: 10
    Last Post: Apr 19, 2013, 3:16 PM
  2. Help on Ext Grid Panel Row selection
    By sumesh in forum 1.x Help
    Replies: 0
    Last Post: Sep 27, 2012, 12:33 PM
  3. Selection Row With Grid Command(!)
    By ismailkocacan in forum Examples and Extras
    Replies: 1
    Last Post: Jun 14, 2012, 10:15 AM
  4. Replies: 0
    Last Post: Sep 13, 2011, 6:59 AM
  5. Grid with two selection
    By Nagaraju in forum 1.x Help
    Replies: 2
    Last Post: Mar 09, 2011, 3:45 AM

Tags for this Thread

Posting Permissions