Originally Posted by
Daniil
I am unable to reproduce.
Is your example enough to reproduce?
Daniil Sorry I should set an example, as we are still alive
This December 21 I have the opportunity to give the example :).
The problem is when you want to filter a particular record and then clean it, then when you select records with "DragTracker" you can see that the area that generates the rectangular effect is lost, disappears.
Configure anything but the filter for the header "name" of "GridPanel"
so you can reproduce what I say.
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store 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>
<html>
<head id="Head1" runat="server">
<link href="/resources/css/examples.css" rel="stylesheet" />
<ext:XScript ID="XScript1" runat="server">
<script>
var addEmployee = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@object.net',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
}, 'Employee');
grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
};
var removeEmployee = function () {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();
grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
};
dragTrack = function () {
var tracker = this,
grid = App.GridPanel1,
view = grid.getView(),
row,
sel;
grid.getStore().each(function (record, i) {
row = Ext.fly(view.getNode(i));
sel = tracker.dragRegion.intersect(row.getRegion());
if (sel) {
grid.getSelectionModel().select(record, true, true);
}
else {
grid.getSelectionModel().deselect(record, true);
}
});
};
var onBeforeStart = function (e) {
var t = Ext.get(e.getTarget());
return !t.up(".x-grid-row-editor");
};
var applyFilter = function (field) {
var store = #{GridPanel1}.getStore();
store.filterBy(getRecordFilter());
};
var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);
if (typeof val != "string") {
return value.length == 0;
}
return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};
var getRecordFilter = function () {
var f = [];
f.push({
filter: function (record) {
return filterString(#{TextField3}.getValue()||"", "name", record);
}
});
var len = f.length;
return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:DragTracker ID="DragTracker" runat="server">
<OnBeforeStart Fn="onBeforeStart" />
<Listeners>
<Drag Fn="dragTrack" />
</Listeners>
</ext:DragTracker>
<ext:Store ID="Store1" runat="server">
<Sorters>
<ext:DataSorter Property="start" Direction="ASC" />
</Sorters>
<Model>
<ext:Model ID="Model1" runat="server" Name="Employee">
<Fields>
<ext:ModelField Name="name" Mapping="Name" Type="String" />
<ext:ModelField Name="email" Mapping="Email" Type="String" />
<ext:ModelField Name="start" Mapping="Start" Type="Date" />
<ext:ModelField Name="salary" Mapping="Salary" Type="Float" />
<ext:ModelField Name="active" Mapping="Active" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400" Frame="true"
Title="Employees" StoreID="Store1" >
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false" ErrorSummary="false" >
<Listeners>
<BeforeEdit Handler="#{RowSelectionModel1};"></BeforeEdit>
</Listeners>
</ext:RowEditing>
</Plugins>
<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="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete"
Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel Cls="x-small-editor">
<Columns >
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
<ext:Column ID="Column1" runat="server" Text="Name" DataIndex="name" Flex="1">
<HeaderItems>
<ext:TextField ID="TextField3" runat="server" AllowBlank="false" EnableKeyEvents="true" >
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Email" DataIndex="email" Width="160" >
<HeaderItems>
<ext:TextField ID="TextField4" runat="server" AllowBlank="false" />
</HeaderItems>
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email" />
</Editor>
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Start Date" DataIndex="start"
Format="MM/dd/yyyy" Width="100" Cls="x-small-editor">
<HeaderItems>
<ext:TextField ID="TextField5" runat="server" AllowBlank="false" />
</HeaderItems>
<Editor>
<ext:DateField ID="DateField1" runat="server" AllowBlank="false" Format="MM/dd/yyyy"
MinDate="01.01.2006" MinText="Can not have a start date before the Company existed."
MaxDate="<%# DateTime.Now %>" AutoDataBind="true" />
</Editor>
</ext:DateColumn>
<ext:NumberColumn ID="NumberColumn1" runat="server" Text="Salary" DataIndex="salary"
Format="$0,0" Cls="x-small-editor">
<HeaderItems>
<ext:TextField ID="TextField7" runat="server" AllowBlank="false" />
</HeaderItems>
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
MaxValue="150000" />
</Editor>
</ext:NumberColumn>
<ext:CheckColumn ID="CheckColumn1" runat="server" Text="Active?" DataIndex="active"
Width="50" >
<HeaderItems>
<ext:TextField ID="TextField6" runat="server" AllowBlank="false" Cls="x-small-editor"/>
</HeaderItems>
<Editor>
<ext:Checkbox ID="Checkbox1" runat="server" />
</Editor>
</ext:CheckColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" >
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
</SelectionModel>
<Listeners>
<AfterRender Handler="var t = this.getView().getTargetEl();
#{DragTracker}.initEl(t);
t.on('mousedown', function () { this.focus(); });" />
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>
Posting Permissions
| Frameworks and Tools for .NET Developers
