Feb 11, 2020, 6:02 PM
[OPEN] [#1693] Grid filter missing items when page bar is on
This can be reproduced by your example code below.
1, Check a few items from the Company Name filter list, the grid is then filtered by selected items.
2, click header of Price column, start sorting by price.
3, Go back to the list filter on Company Name column, only filtered options are showing on the list. I am expecting it shows all options same as step 1 so I can continue to add items.
Looks like this happens when the Page bar is added in. It works as expected if I remove the paging bar.
Thanks
-susan
1, Check a few items from the Company Name filter list, the grid is then filtered by selected items.
2, click header of Price column, start sorting by price.
3, Go back to the list filter on Company Name column, only filtered options are showing on the list. I am expecting it shows all options same as step 1 so I can continue to add items.
Looks like this happens when the Page bar is added in. It works as expected if I remove the paging bar.
Thanks
-susan
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "3m Co", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "3m Co", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American' Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Locking Column Cell Editing - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
ColumnLines="true"
Title="Locking Grid Column"
Frame="true"
MultiColumnSort="true"
Width="800"
Height="600">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column
runat="server"
Text="Company Name"
DataIndex="company"
Width="200"
Locked ="true"
Sortable="true">
<Filter>
<ext:ListFilter />
</Filter>
</ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
<Renderer Format="UsMoney" />
<Filter>
<ext:NumberFilter />
</Filter>
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
<Renderer Fn="change" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
<Filter>
<ext:NumberFilter />
</Filter>
</ext:Column>
<ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
<Renderer Fn="pctChange" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
<Filter>
<ext:NumberFilter />
</Filter>
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
<Editor>
<ext:DateField runat="server" />
</Editor>
<Filter>
<ext:DateFilter />
</Filter>
</ext:DateColumn>
<ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
<Filter>
<ext:ListFilter />
</Filter>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:SpreadsheetSelectionModel runat="server" RowSelect ="true" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
<View>
<ext:GridView runat="server">
</ext:GridView>
</View>
<Features>
<ext:GroupingSummary ID="Grouping1" runat="server"
HideGroupedHeader="false"
StartCollapsed="true"
GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
/>
<ext:Summary runat ="server" ShowSummaryRow="true" />
</Features>
<Buttons>
<ext:Button
ID="btnToggleGroups"
runat="server"
Text="Expand/Collapse Groups"
Icon="TableSort"
Style="margin-left: 6px;">
</ext:Button>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1" />
<ext:FilterHeader runat="server" />
<ext:GridFilters runat ="server" />
</Plugins>
</ext:GridPanel>
</body>
</html>
Last edited by fabricio.murta; Feb 11, 2020 at 7:38 PM.
Reason: fix code closing block