[CLOSED] Unable to deselect selected rows in gridpanel if all rows selected and drag and drop enabled

  1. #1

    [CLOSED] Unable to deselect selected rows in gridpanel if all rows selected and drag and drop enabled

    1. Select All Rows using shift click
    2. Note that there is now no way to unselect selected rows

    Normal behavior is that clicking on a selected row will unselect all other rows. However, this doesn't work if EnableDragDrop="true" for the grid. While I understand that if you click a row without releasing the mouse, you should be able to keep current selected rows and drag. However, if you click and release the mouse, it should unselect all other rows. I dont see a RowKeyUp listener in the grid or in the selectionmodel.

    This happen more often than you think where our users select all the rows in a grid and are "stuck". They are not super tech savy so they dont know that ctrl+click will unselect that row. They are used to other applications where selection will be reset if you click a row.

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
            if (!X.IsAjaxRequest) {
                this.GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
    
                };
    
                this.GridPanel1.Store.Primary.DataBind();
            }
        }
    </script>
    
    <!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>Simple Array Grid - Ext.NET Examples</title>
    </head>
    <body>
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function(value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function(value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
           
        </script>
    
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
        <div style="padding: 5px;">
            <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
                TrackMouseOver="true" Width="600" Height="350" ClicksToEdit="1" ForceValidation="false"
                EnableDragDrop="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    <ext:RecordField Name="flag" Type="Boolean" DefaultValue="true">
                                    </ext:RecordField>
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company Long Header Description Blah" DataIndex="company"
                            Locked="true">
                        </ext:Column>
                        <ext:Column Header="Price Long Header" DataIndex="price" Editable="true">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" DataIndex="lastChange" Editable="true">
                        </ext:DateColumn>
                        <ext:CheckColumn Header="Checkbox" DataIndex="flag" Editable="true">
                        </ext:CheckColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false">
                    </ext:RowSelectionModel>
                </SelectionModel>
                <View>
                    <ext:GridView ForceFit="true">
                    </ext:GridView>
                </View>
            </ext:GridPanel>
        </div>
    </body>
    </html>
    Last edited by Daniil; Oct 14, 2010 at 7:04 PM. Reason: [CLOSED]
  2. #2
    Hi jchau,

    It's a typical RowSelectionModel's behavior.
    Here is the handleMouseDown function of RowSelectionModel with my comment.

    handleMouseDown : function(g, rowIndex, e){
            if(e.button !== 0 || this.isLocked()){
                return;
            }
            var view = this.grid.getView();
            if(e.shiftKey && !this.singleSelect && this.last !== false){
                var last = this.last;
                this.selectRange(last, rowIndex, e.ctrlKey);
                this.last = last; 
                view.focusRow(rowIndex);
            }else{
                var isSelected = this.isSelected(rowIndex);
                if(e.ctrlKey && isSelected){                                 //Take a note of 
                    this.deselectRow(rowIndex);                           //these two lines
                }else if(!isSelected || this.getCount() > 1){
                    this.selectRow(rowIndex, e.ctrlKey || e.shiftKey);
                    view.focusRow(rowIndex);
                }
            }
        }
    As you can see it deselects a row only if CTRL is pressed.

    So, to achieve your requirement needs to override the handleMouseDown adding some logic.
    Or (and) to handle the grid's mouseup event.
    grid.on('mouseup', yourHanlder);

Similar Threads

  1. GridPanel move rows drag and drop
    By cbu in forum 1.x Help
    Replies: 2
    Last Post: Jan 13, 2012, 2:20 PM
  2. [CLOSED] How to set all rows as selected in GridPanel
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 30, 2010, 4:42 PM
  3. Replies: 2
    Last Post: Dec 25, 2009, 2:56 PM
  4. Replies: 6
    Last Post: Dec 17, 2009, 8:40 AM
  5. [CLOSED] Get selected rows in GridPanel
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 24, 2009, 12:48 PM

Posting Permissions