Jan 01, 2012, 4:50 PM
[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...
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]
