[CLOSED] Checkbox is not able uncheck in grid panel with drag and drop

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Checkbox is not able uncheck in grid panel with drag and drop

    Hi,

    In the grid panel, which is required drag and drop functionality, checkbox selection model with row editor functionality. So the row editor will show up based on row cell control info. The row editor should not show up while check or uncheck the checkbox. In the same grid panel I need drag and drop functionality, so I have added EnableDragDrop="true" DDGroup="ddGroup" to grid panel. In this case if we check the checkbox, it got checked, but trying to uncheck the selected one, but uncheck is not working, the checkbox remain in checked mode. It can be uncheck by select check all and then uncheck all with checkbox at grid header. Here is the example code...

    
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var store = this.GridPanel1.GetStore();
    
                store.DataSource = new List<object>
                {
                    new { 
                        Name = "Bill Foot", 
                        Email = "bill.foot@object.net", 
                        Start = new DateTime(2007, 2, 5), 
                        Salary = 37000, 
                        Active = true
                    },
                    new { 
                        Name = "Bill Little", 
                        Email = "bill.little@object.net", 
                        Start = new DateTime(2009, 6, 13), 
                        Salary = 53000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Jones", 
                        Email = "bob.jones@object.net", 
                        Start = new DateTime(2008, 10, 6), 
                        Salary = 70000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Train", 
                        Email = "bob.train@object.net", 
                        Start = new DateTime(2009, 5, 5), 
                        Salary = 68000, 
                        Active = true
                    },
                    new { 
                        Name = "Chris Johnson", 
                        Email = "chris.johnson@object.net", 
                        Start = new DateTime(2009, 1, 25), 
                        Salary = 47000, 
                        Active = true
                    }
                };
    
                store.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>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
        <script type="text/javascript">
            Ext.ux.grid.RowEditor.override({
                isDirty: function () {
                    var dirty,
                        column;
                    this.items.each(function (f, i) {
                        column = this.grid.getColumnModel().getColumnAt(i);
                        if (String(this.values[f.id]) !== String(f.getValue()) && column.getEditor && column.getEditor()) {
                            dirty = true;
                            return false;
                        }
                    }, this);
                    return dirty;
                }
            });
    
            var notifyDrop = function (ddSource, e, data) {
                var index = ddSource.grid.getView().findRowIndex(e.target),
                    store = ddSource.grid.getStore();
                store.remove(ddSource.dragData.selections);
                index = index > store.getCount() ? store.getCount() : index;
                store.insert(index, ddSource.dragData.selections);            
                return true;
            };
        </script>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var addEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.getRowEditor().stopEditing();
                      
                    grid.insertRecord(0, {
                        name   : "New Guy",
                        email  : "guy@object.net",
                        start  : (new Date()).clearTime(),
                        salary : 50000,
                        active : true
                    });
                      
                    grid.getView().refresh();
                    grid.getSelectionModel().selectRow(0);
                    grid.getRowEditor().startEditing(0);
                }
                  
                var removeEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.getRowEditor().stopEditing();
                      
                    var s = grid.getSelectionModel().getSelections();
                      
                    for (var i = 0, r; r = s[i]; i++) {
                        #{Store1}.remove(r);
                    }
                }
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            GridPanel with RowEditor Plugin</h1>
        <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400" AutoExpandColumn="name"
            Title="Employees" EnableDragDrop="true" DDGroup="ddGroup">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="name" Mapping="Name" Type="String" />
                                <ext:RecordField Name="email" Mapping="Email" Type="String" />
                                <ext:RecordField Name="start" Mapping="Start" Type="Date" />
                                <ext:RecordField Name="salary" Mapping="Salary" Type="Float" />
                                <ext:RecordField Name="active" Mapping="Active" Type="Boolean" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Listeners>
                <RowClick Handler="return !(e.getTarget('.x-grid3-td-checker') || e.getTarget('.x-btn'));" />
                <RowDblClick Handler="return !(e.getTarget('.x-grid3-td-checker') || e.getTarget('.x-btn'));" />
                <%--<RowClick Handler="return !e.getTarget('.x-btn');" />
                <RowDblClick Handler="return !e.getTarget('.x-btn');" />--%>
            </Listeners>
            <Plugins>
                <ext:RowEditor ID="RowEditor1" runat="server" SaveText="Update" ClicksToEdit="1">
                </ext:RowEditor>
            </Plugins>
            <View>
                <ext:GridView ID="GridView1" runat="server" MarkDirty="false" />
            </View>
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
                            <Listeners>
                                <Click Fn="addEmployee" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="Button2" runat="server" Text="Remove Employee" Icon="UserDelete">
                            <Listeners>
                                <Click Fn="removeEmployee" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <SelectionModel>
                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" CheckOnly="true" />
            </SelectionModel>
            <ColumnModel>
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column ColumnID="name" Header="First Name" DataIndex="name" Width="220" Sortable="true">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Email" DataIndex="email" Width="150">
                        <Editor>
                            <ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email" />
                        </Editor>
                    </ext:Column>
                    <ext:DateColumn Header="Start Date" DataIndex="start" Format="MM/dd/yyyy" Width="100"
                        Sortable="true">
                        <Editor>
                            <ext:DateField ID="DateField1" runat="server" AllowBlank="false" MinDate="01.01.2006"
                                MinText="Can not have a start date before the Company existed." />
                        </Editor>
                    </ext:DateColumn>
                    <ext:NumberColumn Header="Salary" DataIndex="salary" Format="$0,0.00" Width="100"
                        Sortable="true">
                        <Editor>
                            <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
                                MaxValue="150000" />
                        </Editor>
                    </ext:NumberColumn>
                    <ext:BooleanColumn Header="Active" DataIndex="active" Align="Center" Width="50" TrueText="Yes"
                        FalseText="No">
                        <Editor>
                            <ext:Checkbox ID="Checkbox1" runat="server" />
                        </Editor>
                    </ext:BooleanColumn>
                    <ext:CommandColumn Header="Cmd Column" Width="100">
                        <Commands>
                            <ext:GridCommand Icon="Note" CommandName="viewTask" Text="Click to View">
                            </ext:GridCommand>
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        <ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanel1.view.scroller.dom}"
            Group="ddGroup">
            <NotifyDrop Fn="notifyDrop" />
        </ext:DropTarget>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 04, 2012 at 5:59 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please replace the GridPanel's RowClick and RowDblClick listeners with:
    <RowClick Handler="if (e.getTarget('.x-grid3-td-checker') || e.getTarget('.x-btn')) {
                            RowEditor1.on('beforeedit', function () { return false; }, null, { single : true }); 
                        }" />
    <RowDblClick Handler="if (e.getTarget('.x-grid3-td-checker') || e.getTarget('.x-btn')) {
                            RowEditor1.on('beforeedit', function () { return false; }, null, { single : true }); 
                        }" />

Similar Threads

  1. [CLOSED] Can we have drag and drop in same grid
    By sriram in forum 1.x Legacy Premium Help
    Replies: 17
    Last Post: Jul 11, 2012, 5:02 PM
  2. [CLOSED] Drag and Drop Reordering inside a panel
    By jchau in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 10, 2011, 5:02 PM
  3. [CLOSED] Grid Drag and Drop example
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 14, 2011, 1:20 PM
  4. [CLOSED] Grid to Grid Drag and Drop Questions
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 15, 2011, 10:43 AM
  5. [FIXED] Drag/Drop of Window out of panel
    By jetskij16 in forum Bugs
    Replies: 1
    Last Post: Apr 16, 2008, 5:06 PM

Tags for this Thread

Posting Permissions