Hello @fabricio,
I have somehow created a runnable sample which reproduces the issue even after overriding the collection. i.e. dirty rows are getting filtered if the column filter is applied already. In the sample below click on the filters option on the column size. Just check the "large" option. The grid would filter as expected. Try to change the large as small . The record becomes dirty because of change but disappears. We do not want the dirty rows to be filtered. (which is the behavior in ext.net 2.5). Anyway I have a sample to reproduce now, but in our actual code, grid is not responsive at all after the override is applied. I have tried multiple times with / without this override. It simply throws "cannot set z index on undefined". I don't have clue of this when i combine this message with the override. !!!
Anyway, hopefully this sample should help you understand our requirement better.
Thanks!
Controller:
namespace Ext.Net.MVC.Examples.Areas.GridPanel_FilterHeader.Controllers
{
public class OverviewController : Controller
{
public ActionResult Index()
{
return View(new List<object>{
new
{
Id = 1,
Price = 71.72,
Company = "3m Co",
Date = new DateTime(2007, 9, 1),
Size = "large",
Visible = true
},
new
{
Id = 2,
Price = 29.01,
Company = "Aloca Inc",
Date = new DateTime(2007, 08, 01),
Size = "medium",
Visible = false
},
new
{
Id = 3,
Price = 83.81,
Company = "Altria Group Inc",
Date = new DateTime(2007, 08, 03),
Size = "large",
Visible = false
},
new
{
Id = 4,
Price = 52.55,
Company = "American Express Company",
Date = new DateTime(2008, 01, 04),
Size = "extra large",
Visible = true
},
new
{
Id = 5,
Price = 64.13,
Company = "American International Group Inc.",
Date = new DateTime(2008, 03, 04),
Size = "small",
Visible = true
},
new
{
Id = 6,
Price = 31.61,
Company = "AT&T Inc.",
Date = new DateTime(2008, 02, 01),
Size = "extra large",
Visible = false
},
new
{
Id = 7,
Price = 75.43,
Company = "Boeing Co.",
Date = new DateTime(2008, 01, 01),
Size = "large",
Visible = true
},
new
{
Id = 8,
Price = 67.27,
Company = "Caterpillar Inc.",
Date = new DateTime(2007, 12, 03),
Size = "medium",
Visible = true
},
new
{
Id = 9,
Price = 49.37,
Company = "Citigroup, Inc.",
Date = new DateTime(2007, 11, 24),
Size = "large",
Visible = true
},
new
{
Id = 10,
Price = 40.48,
Company = "E.I. du Pont de Nemours and Company",
Date = new DateTime(2007, 05, 09),
Size = "extra large",
Visible = false
},
new
{
Id = 11,
Price = 68.1,
Company = "Exxon Mobile Corp",
Date = new DateTime(2007, 12, 12),
Size = "large",
Visible = true
},
new
{
Id = 12,
Price = 34.14,
Company = "General Electric Company",
Date = new DateTime(2008, 06, 16),
Size = "extra large",
Visible = true
},
new
{
Id = 13,
Price = 30.27,
Company = "General Motors Corporation",
Date = new DateTime(2006, 12, 07),
Size = "medium",
Visible = true
},
new
{
Id = 14,
Price = 36.53,
Company = "Hewlett-Packard Co.",
Date = new DateTime(2007, 05, 13),
Size = "large",
Visible = true
},
new
{
Id = 15,
Price = 38.77,
Company = "Honweywell Intl Inc",
Date = new DateTime(2006, 11, 07),
Size = "medium",
Visible = false
},
new
{
Id = 16,
Price = 19.88,
Company = "Intel Corporation",
Date = new DateTime(2007, 01, 09),
Size = "small",
Visible = true
},
new
{
Id = 17,
Price = 81.41,
Company = "International Business Machines",
Date = new DateTime(2005, 01, 21),
Size = "extra large",
Visible = true
},
new
{
Id = 18,
Price = 64.72,
Company = "Johnson & Johnson",
Date = new DateTime(2008, 01, 10),
Size = "extra large",
Visible = true
},
new
{
Id = 19,
Price = 45.73,
Company = "JP Morgan & Chase & Co",
Date = new DateTime(2008, 02, 20),
Size = "large",
Visible = false
},
new
{
Id = 20,
Price = 36.76,
Company = "McDonald's Corporation",
Date = new DateTime(2007, 06, 12),
Size = "large",
Visible = true
},
new
{
Id = 21,
Price = 27.96,
Company = "Pfizer Inc",
Date = new DateTime(2007, 12, 30),
Size = "small",
Visible = false
},
new
{
Id = 22,
Price = 45.07,
Company = "The Coca-Cola Company",
Date = new DateTime(2007, 01, 30),
Size = "medium",
Visible = false
},
new
{
Id = 23,
Price = 34.64,
Company = "The Home Depot, Inc",
Date = new DateTime(2006, 12, 31),
Size = "small",
Visible = true
},
new
{
Id = 24,
Price = 61.91,
Company = "The Procter & Gamble Company",
Date = new DateTime(2007, 04, 08),
Size = "extra large",
Visible = true
},
new
{
Id = 25,
Price = 63.26,
Company = "United Technologies Corporation",
Date = new DateTime(2006, 06, 04),
Size = "medium",
Visible = true
},
new
{
Id = 26,
Price = 35.57,
Company = "Verizon Communications",
Date = new DateTime(2005, 07, 09),
Size = "small",
Visible = false
},
new
{
Id = 27,
Price = 45.45,
Company = "Wal-Mart Stores, Inc",
Date = new DateTime(2006, 09, 09),
Size = "large",
Visible = true
}
});
}
}
}
View
@using SortDirection = Ext.Net.SortDirection
@model List<object>
@{
var X = Html.X();
ViewBag.Title = "FilterHeader plugin overview - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
@section headtag
{
<script>
var loadFilter = function (plugin) {
plugin.setValue({
Id : ">5",
Company: "!Inc.",
Price: ">50<70",
Visible: 1
});
};
Ext.define('Ext.util.Collection_overrides', {
override: 'Ext.util.Collection',
onCollectionAdd: function (source, details) {
var me = this,
atItem = details.atItem,
items = details.items,
requestedIndex = me.requestedIndex,
filtered, index, copy, i, item, n;
if (!me.sorted) {
if (requestedIndex !== undefined) {
index = requestedIndex;
} else if (atItem) {
index = me.indexOf(atItem);
if (index === -1) {
index = me.findInsertIndex(items[0]);
} else {
++index;
}
} else {
index = 0;
}
}
if (me.getAutoFilter() && me.filtered) {
for (i = 0, n = items.length; i < n; ++i) {
item = items[i];
if (copy) {
copy.push(item);
}
}
}
me.splice((index < 0) ? me.length : index, 0, copy || items);
},
itemChanged: function (item, modified, oldKey, meta) {
var me = this,
keyChanged = oldKey === 0 || !!oldKey,
filtered = me.filtered && me.getAutoFilter(),
filterChanged = false,
itemMovement = 0,
items = me.items,
last = me.length - 1,
sorted = me.sorted && last > 0 && me.getAutoSort(),
source = me.getSource(),
toAdd,
toRemove = 0,
index,
newIndex,
wasFiltered = false,
details, newKey, sortFn;
if (source && !source.updating) {
source.itemChanged(item, modified, oldKey, meta);
} else {
newKey = me.getKey(item);
if (filtered) {
index = me.indexOfKey(keyChanged ? oldKey : newKey);
wasFiltered = (index < 0);
}
if (wasFiltered) {
toAdd = [
item
];
newIndex = me.length;
}
else if (sorted) {
index = me.indexOfKey(keyChanged ? oldKey : newKey);
sortFn = me.getSortFn();
if (index && sortFn(items[index - 1], items[index]) > 0) {
itemMovement = -1;
newIndex = Ext.Array.binarySearch(items, item, 0, index, sortFn);
} else if (index < last && sortFn(items[index], items[index + 1]) > 0) {
itemMovement = 1;
newIndex = Ext.Array.binarySearch(items, item, index + 1, sortFn);
}
if (itemMovement) {
toAdd = [
item
];
}
}
details = {
item: item,
key: newKey,
index: newIndex,
filterChanged: wasFiltered,
keyChanged: keyChanged,
indexChanged: !!itemMovement,
filtered: false,
oldIndex: index,
newIndex: newIndex,
wasFiltered: wasFiltered,
meta: meta
};
if (keyChanged) {
details.oldKey = oldKey;
}
if (modified) {
details.modified = modified;
}
me.beginUpdate();
me.notify('beforeitemchange', [
details
]);
if (keyChanged) {
me.updateKey(item, oldKey);
}
if (toAdd || toRemove) {
me.splice(newIndex, toRemove, toAdd);
}
if (itemMovement > 0) {
details.newIndex--;
} else if (itemMovement < 0) {
details.oldIndex++;
}
me.notify('itemchange', [details]);
me.endUpdate();
}
},
});
</script>
}
@section example {
<h1>FilterHeader plugin overview</h1>
<p>FilterHeader plugin allows use the following operators:</p>
<ul>
<li>String: =(equals), +(starts with), -(ends with), *(contains), !(doesn't contain)</li>
<li>Date: >, <, >=, <= or date for equals</li>
<li>Number: >, <, >=, <= or date for equals</li>
<li>Boolean: 1, 0, true, false</li>
</ul>
@(X.Window()
.ID("Window1")
.Width(800)
.Height(400)
.Closable(false)
.Title("Example")
.Maximizable(true)
.Layout(LayoutType.Fit)
.Items(
X.GridPanel()
.ID("GridPanel1")
.Store(X.Store()
.ID("Store1")
.DataSource(Model)
.PageSize(10)
.Model(X.Model()
.Fields(
X.ModelField().Name("Id").Type(ModelFieldType.Int),
X.ModelField().Name("Company").Type(ModelFieldType.String),
X.ModelField().Name("Price").Type(ModelFieldType.Float),
X.ModelField().Name("Date").Type(ModelFieldType.Date),
X.ModelField().Name("Size").Type(ModelFieldType.String),
X.ModelField().Name("Visible").Type(ModelFieldType.Boolean)
)
)
.Sorters(X.DataSorter().Property("Company").Direction(SortDirection.ASC))
)
.ColumnModel(
X.Column().Text("ID").DataIndex("Id"),
X.Column().Text("Company").DataIndex("Company").Flex(1).Editor(Html.X().TextField()),
X.Column().Text("Price").DataIndex("Price").Renderer(new Renderer{Format= RendererFormat.UsMoney}),
X.DateColumn().Text("Date").DataIndex("Date").Align(Alignment.Center).Format("yyyy-MM-dd"),
X.Column().Text("Size").DataIndex("Size").Editor(Html.X().TextField()).Filter(Html.X().ListFilter()),
X.Column().Text("Visible").DataIndex("Visible").Align(Alignment.Center)
.Renderer("return (value) ? 'Yes':'No';")
)
.Plugins(
X.FilterHeader(),X.CellEditing().ClicksToEdit(1),X.GridFilters()
)
.BottomBar(
X.PagingToolbar()
.HideRefresh(true)
)
.DockedItems(
X.Toolbar()
.Dock(Dock.Bottom)
.Items(
X.Button()
.Text("Case Sensitive")
.EnableToggle(true)
.AllowDepress(true)
.ToggleHandler("var plugin = this.up('grid').filterHeader; plugin.caseSensitive = this.pressed; plugin.applyFilter();"),
X.Button()
.Text("Load Filters")
.Handler("loadFilter(this.up('grid').filterHeader);"),
X.Button()
.Text("Get Fields Values")
.ToolTip("Get Values of Fields")
.Handler("var values = Ext.encode(this.up('grid').filterHeader.getValue()); Ext.Msg.alert('Fields Values', values);"),
X.Button()
.Text("Get Filter Values")
.ToolTip("Get Filter Values of Grid")
.Handler("var filters = Ext.encode(this.up('grid').filterHeader.getFilterValues()); Ext.Msg.alert('Filter Values', filters);"),
X.Button()
.Text("Clear Filters")
.Handler("this.up('grid').filterHeader.clearFilter();")
)
)
.Listeners(l =>
{
l.AfterRender.Handler = "this.filterHeader.fields[0].setIconCls('#Magnifier')";
l.AfterRender.Delay = 10;
})
)
)
}
