[CLOSED] GridPanel with EnableDragDrop

  1. #1

    [CLOSED] GridPanel with EnableDragDrop



    I've got a GridPanel which I need to have EnableDragDrop set to "true". The GridPanel is fully editable, and contains TextFields and ComboBoxes.

    When editing a ComboBox value, and clicking anywhere else on the GridPanel, the cell containing the ComboBox doesn't return back to the read-only state. Clicking elsewhere on the page returns the cell back to read-only.

    As soon as the "EnableDragDrop" attribute is removed, the problem goes away. I can't seem to find a fix for this.

    This cut-down sample illustrates the problem:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "AL", "1",}, 
                new object[] { "AK", "2",}, 
                new object[] { "AZ", "3",}, 
                new object[] { "AR", "4",}, 
                new object[] { "CA", "5",} 
            };
            this.Store1.DataBind();
    
    
            this.Store2.DataSource = new object[] 
            { 
                new object[] { "John", "1"}, 
                new object[] { "James", "2"}, 
                new object[] { "Jerry", "3"}, 
                new object[] { "Horatio", "4"}, 
                new object[] { "Bob", "5"} ,
                new object[] { "Larry", "5"} 
            };
            this.Store2.DataBind();
        }
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>ComboBox Example</title>
    </head>
    
    
    <script type="text/javascript">
     function RenderStateName(value) {
      if (value)
       return Store1.getById(value).data.state;
     }
    </script>
    
    
    <body style="margin:10px;">
        <form id="form1" runat="server">
        
            <ext:ScriptManager ID="ScriptManager1" runat="server">
       
            </ext:ScriptManager>
             
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader ReaderID="id">
                        <Fields>
                            <ext:RecordField Name="state" />
                            <ext:RecordField Name="id" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:Store ID="Store2" runat="server">
                <Reader>
                    <ext:ArrayReader ReaderID="stateId">
                        <Fields>
                            <ext:RecordField Name="name" />
                            <ext:RecordField Name="stateId" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        
      <ext:GridPanel EnableDragDrop="true" ID="GridPanel1" TrackMouseOver="true" runat="server" StoreID="Store2" Height="300">
       <ColumnModel ID="ColumnModel2" runat="server">
        <Columns>
         <ext:Column DataIndex="name" Header="Name">
          <Editor>
           <ext:TextField runat="server" />
          </Editor>
         </ext:Column>
         <ext:Column ColumnID="state" DataIndex="stateId" Header="State" Width="200">
          <Renderer Fn="RenderStateName" />
          <Editor>
           <ext:ComboBox ForceSelection="true" ID="cb1" runat="server" StoreID="Store1" 
               DisplayField="state" ValueField="id" TriggerAction="All"
               AllowBlank="false" Mode="local">
           </ext:ComboBox>
          </Editor>
         </ext:Column>
        </Columns>
       </ColumnModel>
       <SelectionModel>
        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server"></ext:RowSelectionModel>
       </SelectionModel>
       <CustomConfig> <ext:ConfigItem Name="ddGroup" Value="2to1" Mode="Value"/></CustomConfig>
      </ext:GridPanel>
        </form>
    </body>
    </html>
  2. #2

    RE: [CLOSED] GridPanel with EnableDragDrop

    Hi,

    When you set EnableDragDrop="true" a grid monitors click event to start draging. Therefore clicking is not ends editing. Try to add the following listener to the grid
    <CellClick*Handler="this.stopEditing(false);" />
    *
  3. #3

    RE: [CLOSED] GridPanel with EnableDragDrop

    Thanks Vladimir, that's fixed it! Brilliant, as usual!

    Dan

Posting Permissions