PDA

View Full Version : Grid Problem with filter and sort


webmanufacturing
Jun 01, 2021, 9:59 AM
Hi,
I have a problem when i filter a column with GRIDFILTER component, and another when i sort.
This two problem are:

- the first is sorted column: if i insert/edit record for sorted column, when i finished to edit the column's cell, the record take the position of sort. examples: add a new record and put "z" in the company name. now try to click on price cell(or push enter). the record goes in the last position. if u change the page, it go on the top of the second, and itdon't take the order...

- the second behavior is filtered column: if i filter column(ex. company-->E.I), i try to insert a new record, it is not visible, because not identify the filter and the new indexed row. It go in edit on index 0(then on te e.i company row), but it insert the new record in the not filtered 0 row index (if you clear filter, you can see the new record).

here the code.



<%@ Page Language="C#" CodeFile="prova.aspx.cs" Inherits="prova" %>

<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = FiltersTestData.Data;
}
}

</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>GridPanel with Local Filtering, Sorting and Paging - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var getFilters = function () {
var out = [],
filters = this.up('grid').store.getFilters().items,
length = filters.length,
i;

for (i = 0; i < length; i++) {
out[i] = filters[i].serialize();
}

Ext.Msg.alert('Filters', Ext.encode(out));
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<h1>GridPanel with Local Filtering, Sorting and Paging</h1>

<p>Please see column header menu for applying filters</p>

<ext:Window
runat="server"
Width="950"
Height="400"
Closable="false"
Collapsible="true"
Title="Example"
Maximizable="true"
Layout="Fit">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Border="false">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Company" Type="String" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Size" Type="String" />
<ext:ModelField Name="Visible" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Company" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="Id">
<Filter>
<ext:NumberFilter />
</Filter>
</ext:Column>
<ext:Column ID="CompanyColumn" runat="server" Text="Company" DataIndex="Company" Flex="1">
<Filter>
<ext:StringFilter />
</Filter>
<Editor>
<ext:TextField ID="TextField4" runat="server" MaxLength="50"/>
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
<Filter>
<ext:NumberFilter />
</Filter>
<Editor>
<ext:TextField ID="TextField1" runat="server" MaxLength="50"/>
</Editor>
</ext:Column>
<ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd">
<Filter>
<ext:DateFilter>
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
</Filter>
</ext:DateColumn>
<ext:Column runat="server" Text="Size" DataIndex="Size">
<Filter>
<ext:ListFilter Options="extra small,small,medium,large,extra large" />
</Filter>
</ext:Column>
<ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
<Renderer Handler="return (value) ? 'Yes':'No';" />
<Filter>
<ext:BooleanFilter />
</Filter>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:GridFilters runat="server" />
<ext:CellEditing ID="CellEditing1" ClicksToEdit="1" runat="server">
</ext:CellEditing>
</Plugins>
<BottomBar>
<ext:PagingToolbar runat="server" HideRefresh="True">
<Items>
<ext:Button ID="Button_New" runat="server" Text="new" IconCls="x-fa fa-plus-square">
<Listeners>
<Click Handler="#{Store1}.insert(0, {});
#{GridPanel1}.editingPlugin.startEditByPosition({r ow:0, column:1}); " />
</Listeners>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Window>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class prova : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
}

public class FiltersTestData
{
public static List<object> Data
{
get
{
List<object> goods = new List<object>
{
new
{
Id = 1,
Price = 71.72,
Company = "3m Co",
Date = new DateTime(2014, 9, 1),
Size = "large",
Visible = true
},
new
{
Id = 2,
Price = 29.01,
Company = "Aloca Inc",
Date = new DateTime(2014, 08, 01),
Size = "medium",
Visible = false
},
new
{
Id = 3,
Price = 83.81,
Company = "Altria Group Inc",
Date = new DateTime(2014, 08, 03),
Size = "large",
Visible = false
},
new
{
Id = 4,
Price = 52.55,
Company = "American Express Company",
Date = new DateTime(2015, 01, 04),
Size = "extra large",
Visible = true
},
new
{
Id = 5,
Price = 64.13,
Company = "American International Group Inc.",
Date = new DateTime(2015, 03, 04),
Size = "small",
Visible = true
},
new
{
Id = 6,
Price = 31.61,
Company = "AT&T Inc.",
Date = new DateTime(2015, 02, 01),
Size = "extra large",
Visible = false
},
new
{
Id = 7,
Price = 75.43,
Company = "Boeing Co.",
Date = new DateTime(2015, 01, 01),
Size = "large",
Visible = true
},
new
{
Id = 8,
Price = 67.27,
Company = "Caterpillar Inc.",
Date = new DateTime(2014, 12, 03),
Size = "medium",
Visible = true
},
new
{
Id = 9,
Price = 49.37,
Company = "Citigroup, Inc.",
Date = new DateTime(2014, 11, 24),
Size = "large",
Visible = true
},
new
{
Id = 10,
Price = 40.48,
Company = "E.I. du Pont de Nemours and Company",
Date = new DateTime(2014, 05, 09),
Size = "extra large",
Visible = false
},
new
{
Id = 11,
Price = 68.1,
Company = "Exxon Mobile Corp",
Date = new DateTime(2014, 12, 12),
Size = "large",
Visible = true
},
new
{
Id = 12,
Price = 34.14,
Company = "General Electric Company",
Date = new DateTime(2015, 06, 16),
Size = "extra large",
Visible = true
},
new
{
Id = 13,
Price = 30.27,
Company = "General Motors Corporation",
Date = new DateTime(2013, 12, 07),
Size = "medium",
Visible = true
},
new
{
Id = 14,
Price = 36.53,
Company = "Hewlett-Packard Co.",
Date = new DateTime(2014, 05, 13),
Size = "large",
Visible = true
},
new
{
Id = 15,
Price = 38.77,
Company = "Honweywell Intl Inc",
Date = new DateTime(2013, 11, 07),
Size = "medium",
Visible = false
},
new
{
Id = 16,
Price = 19.88,
Company = "Intel Corporation",
Date = new DateTime(2014, 01, 09),
Size = "small",
Visible = true
},
new
{
Id = 17,
Price = 81.41,
Company = "International Business Machines",
Date = new DateTime(2012, 01, 21),
Size = "extra large",
Visible = true
},
new
{
Id = 18,
Price = 64.72,
Company = "Johnson & Johnson",
Date = new DateTime(2015, 01, 10),
Size = "extra large",
Visible = true
},
new
{
Id = 19,
Price = 45.73,
Company = "JP Morgan & Chase & Co",
Date = new DateTime(2015, 02, 20),
Size = "large",
Visible = false
},
new
{
Id = 20,
Price = 36.76,
Company = "McDonald's Corporation",
Date = new DateTime(2014, 06, 12),
Size = "large",
Visible = true
},
new
{
Id = 21,
Price = 27.96,
Company = "Pfizer Inc",
Date = new DateTime(2014, 12, 30),
Size = "small",
Visible = false
},
new
{
Id = 22,
Price = 45.07,
Company = "The Coca-Cola Company",
Date = new DateTime(2014, 01, 30),
Size = "medium",
Visible = false
},
new
{
Id = 23,
Price = 34.64,
Company = "The Home Depot, Inc",
Date = new DateTime(2013, 12, 31),
Size = "small",
Visible = true
},
new
{
Id = 24,
Price = 61.91,
Company = "The Procter & Gamble Company",
Date = new DateTime(2014, 04, 08),
Size = "extra large",
Visible = true
},
new
{
Id = 25,
Price = 63.26,
Company = "United Technologies Corporation",
Date = new DateTime(2013, 06, 04),
Size = "medium",
Visible = true
},
new
{
Id = 26,
Price = 35.57,
Company = "Verizon Communications",
Date = new DateTime(2012, 07, 09),
Size = "small",
Visible = false
},
new
{
Id = 27,
Price = 45.45,
Company = "Wal-Mart Stores, Inc",
Date = new DateTime(2013, 09, 09),
Size = "large",
Visible = true
}
};

return goods;
}
}
}


Thanks in advance
Guglielmo
fabricio.murta
Jun 01, 2021, 7:06 PM
Hello, Guglielmo!

Thanks for the test case and the detailed reproduction instructions.


the first is sorted column: if i insert/edit record for sorted column, when i finished to edit the column's cell, the record take the position of sort.

I believe the best course of action here is to refresh the view once the record is added. To start with, the number of rows per page can't be obeyed if you add a new row unless you refresh the view. To complicate things a bit, then you'd have to switch to the page exactly where the added record lies in. Not enough of issues, you also have to deal with the "dirty" (the red arrow in the cells of the added row) state of the not-yet-saved row.

The first part, where the sorting is kept sane, is just a matter of re-applying current sort once you edit a row. This will come with the advantage that an edited row will always be placed where it belongs, and that the page limit won't get exceeded once the record is added then first edit applied. For that, you can add an edit event to the ext:CellEditing plug in just like this:



<ext:CellEditing ID="CellEditing1" ClicksToEdit="1" runat="server">
<Listeners>
<Edit Handler="#{GridPanel1}.getStore().applySorters(#{GridPanel1 }.getStore().getSorters().items)" />
</Listeners>
</ext:CellEditing>


But then there's the problem where the just added record is moved to a page away, and it may look confuse to the user. If that's a problem for you and you can't figure out by yourself, we can see if there's a way to make the grid "smart" and switch to the page where the record was moved to after edit. It is probably possible and would just take some investigation to get it working.


- the second behavior is filtered column: if i filter column(ex. company-->E.I), i try to insert a new record, it is not visible, because not identify the filter and the new indexed row. It go in edit on index 0(then on te e.i company row), but it insert the new record in the not filtered 0 row index (if you clear filter, you can see the new record).

Hmm this looks a bit contradictory; you want to filter the store yet you want to show a record that does not match the filter. I would suggest you just going a different way to add records in this situation, use a popup window, or remove the filter. If you -really- want the functionality, you would have to manually add a filter to display the added record. But this may become really tricky to integrate with "any current filter the grid may have".

Adding an in-place record does not really mingle very well with paging (even with local data) or buffered/remote data grids, just because in these cases there's no certainity where the row should be displayed and if the row is not saved, you won't be getting it back if a refresh is triggered (the server would return the old data without the just added record).

If you decide on any of the approaches mentioned above and have trouble making them work, let us know where you are stuck and we will try to help you more!

Hope this helps!