[CLOSED] GridPanel: selectionModel

  1. #1

    [CLOSED] GridPanel: selectionModel

    Hello,

    When I set the "EnableDragDrop" attribut to "true" and want to use the CellSelectionModel I get an error.

    What I want to do is following. A gridPanel with 5 columns. The first 2 columns will be used for making a decision.
    For example I have col1, col2, col3, col4, col5

    To make the drag if I click on the column col1 I will have another action als if I click on col2.

    But in the handler I would want to have the value of all columns.

    How can I do it?

    Romuald.
    Last edited by geoffrey.mcgill; Jul 07, 2010 at 2:23 AM.
  2. #2

    RE: GridPanel: selectionModel

    Hi,

    EnableDragDrop works with RowSelectionModel only.
    You have to use custom DragZone to work with CellSelectionModel

    <%@ 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)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] {"Cell1_1", "Cell1_2", "Cell1_3" },
                    new object[] {"Cell2_1", "Cell2_2", "Cell2_3" },
                    new object[] {"Cell3_1", "Cell3_2", "Cell3_3" }
                };
            }
        }
    </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 runat="server">
        <title></title>
        
        <script type="text/javascript">
            function getDragData(e){
                var grid = GridPanel1,
                    t = Ext.lib.Event.getTarget(e),
                    rowIndex = grid.view.findRowIndex(t),
                    cellIndex = grid.view.findCellIndex(t);
                    
                if(!this.ddel){
                    this.ddel = &#100;ocument.createElement('div');
                    this.ddel.className = 'x-grid-dd-wrap';
                }
                    
                if(rowIndex !== false &amp;&amp; cellIndex !== false){
                    var sm = grid.selModel,
                        cell = sm.getSelectedCell();
                    
                    if(!cell || cell[0] != rowIndex || cell[1] != cellIndex || e.hasModifier()){
                        sm.handleMouseDown(grid, rowIndex, cellIndex, e);
                    }
                    return {
                        grid: grid, 
                        ddel: this.ddel, 
                        rowIndex: rowIndex, 
                        cellIndex: cellIndex, 
                        cell: sm.getSelectedCell(),
                        record: grid.store.getAt(rowIndex),
                        field : grid.getColumnModel().getDataIndex(cellIndex)
                    };
                }
                return false;
            }
            
            function onInitDrag(e){
               var data = this.dragData;
               this.ddel.innerHTML = String.format("[{0},{1}]", data.cellIndex, data.rowIndex);
               this.proxy.update(this.ddel);         
            }
            
            function dropCell(ddSource, e, data){
                Ext.get("dropDiv").dom.innerHTML = String.format("<p>CellIndex:{0}, RowIndex:{1}</p>", data.cellIndex, data.rowIndex);
            }
        </script>
        
        <style type="text/css">
            #dropDiv{
                width:400px;
                height:100px;
                border:3px solid black;
                margin:10px;
                text-align:center;
            }
            
            #dropDiv p{
                line-height:100px;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" ScriptMode="Debug" />
        
        <ext:GridPanel 
            ID="GridPanel1"
            StyleSpec="margin:10px;"
            runat="server"         
            Title="Grid"         
            Width="400" 
            Height="150" 
            >
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="cell1" />
                                <ext:RecordField Name="cell2" />
                                <ext:RecordField Name="cell3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Cell1" DataIndex="cell1" />
                    <ext:Column Header="Cell2" DataIndex="cell2" />
                    <ext:Column Header="Cell3" DataIndex="cell3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CellSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>
        
        <div id="dropDiv">
            <p>Drop on me</p>
        
    
        
        <ext:DragZone runat="server" Target="={#{GridPanel1}.view.scroller}" Group="CellDD">        
            <GetDragData Fn="getDragData" />
            <OnInitDrag Fn="onInitDrag" />
            <AfterRepair Handler="this.dragging = false;" />
            <GetRepairXY Handler="return false;" />
        </ext:DragZone>
        
        <ext:DropTarget runat="server" Target="dropDiv" Group="CellDD">
            <NotifyDrop Fn="dropCell" />
        </ext:DropTarget>          
    </body>
    </html>
  3. #3
    Hello, I try the example but when I make the drag nothing occurs.

    Here again my example and what I want to do:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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></title>       
    </head> 
    <body> 
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug"> 
        </ext:ResourceManager> 
        <form id="form1" runat="server"> 
        <ext:Panel ID="Panel1" runat="server" Height="400" CtCls="south-panel" Title="center"
            Collapsed="false" BodyStyle="padding:5px;" Layout="hbox"> 
            <Items> 
                <ext:Panel ID="Panel2" Title="combobox" StyleSpec="font-size:12px" runat="server" Width="200"> 
                    <Items> 
                        <ext:ComboBox ID="ComboBox1" runat="server"> 
                        </ext:ComboBox> 
                    </Items> 
                </ext:Panel> 
                <ext:Panel ID="Panel3" Title="datepicker" StyleSpec="font-size:12px" runat="server" Width="200"> 
                    <Items> 
                        <ext:DatePicker ID="DatePicker1" runat="server" EnableTheming="true" EnableViewState="true"> 
                        </ext:DatePicker> 
                    </Items> 
                </ext:Panel> 
     
    <ext:Panel ID="Panel5" runat="server" Title="titre"
    Flex="1" StyleSpec="font-size:12px; margin-left:10px; margin-right:10px" Height="225">
    <Items>
    
                <ext:TabPanel ID="TabPanel1" Title="TabPanel" runat="server" Height="225"> 
                    <Items> 
     
    <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Titre"
    TrackMouseOver="true" AutoExpandColumn="Project" Hidden="false" Border="false"
    Header="false">
    <Store>
    <ext:Store ID="Store" runat="server">
    <Proxy>
    <ext:HttpProxy Url='controller/action' Json="true" Method="GET"
    AutoDataBind="true" />
    </Proxy>
    <Reader>
    <ext:JsonReader IDProperty="Id" Root="data" TotalProperty="total">
    <Fields>
    <ext:RecordField Name="Id" />
    </Fields>
    </ext:JsonReader>
    </Reader>
    <BaseParams>
    <ext:Parameter Name="Id" Value="value" Mode="Raw" />
    </BaseParams>
    </ext:Store>
    </Store>
    <ColumnModel ID="ColumnModel1" runat="server">
    <Columns>
    <ext:Column Header="">
    <Renderer Fn="function(){return getImageType('T')}" />
    </ext:Column>
    <ext:Column Header="">
    <Renderer Fn="function(){return getImageType('E')}" />
    </ext:Column>
    <ext:Column ColumnID="Project" Header="col3"
    DataIndex="Id" />
    </Columns>
    </ColumnModel>
    <SelectionModel>
    <ext:CellSelectionModel runat="server" />
    </SelectionModel>
    
    </ext:GridPanel>
    
     
                        
                    </Items> 
                </ext:TabPanel> 
    </Items>
    </ext:Panel>
     
                <ext:Panel ID="Panel5" runat="server" Width="200"> 
                    <Items> 
                        <ext:Button ID="Button1" runat="server" Icon="Add" ToolTip="Add something"> 
                        </ext:Button> 
                    </Items> 
                </ext:Panel> 
            </Items> 
        </ext:Panel> 
        </form> 
    </body> 
    </html>
    I would want to enable the drag only on the first two column with Image of type T or E.
    When I drag with the cell with image of type T I will open another page as when I drag the cell with image of type E. Nonetheless the information of the whole row should be available with the data parameter of the dropcell handler.

    The drop should be made on the datepicker.

    I hope it is clear to understand.
    Thanks in advance for your answer.

    Romuald.
  4. #4
    Hello,

    I find the solution.

    Romuald.
  5. #5
    Quote Originally Posted by RomualdAwessou View Post
    Hello,

    I find the solution.

    Romuald.
    Please post a quick update with either the correct code and/or description of how to solve. This may help others in the future.
    Geoffrey McGill
    Founder
  6. #6
    Hello,

    within the suggested solution by vladimir you only have to change

    Target="={#{GridPanel1}.view.scroller}"

    to

    Target="={GridPanel1.view.scroller}"

    Romuald.

Similar Threads

  1. [CLOSED] PartialExtView and GridPanel SelectionModel
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Aug 30, 2012, 5:20 AM
  2. [CLOSED] GridPanel SelectionModel with Loader
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 17, 2012, 6:45 AM
  3. Replies: 6
    Last Post: Sep 09, 2011, 9:19 AM
  4. [CLOSED] GridPanel and SelectionModel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Sep 06, 2009, 2:55 PM
  5. [CLOSED] GridPanel SelectionModel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 25, 2008, 6:26 PM

Posting Permissions