PDA

View Full Version : [CLOSED] GridFIlters: ListFilter not working



Alex Luna
Dec 17, 2019, 9:58 PM
Hello,

I'm migrating an app from Ext.Net v1 to v5. Tough work.
I'm facing two problems with ListFilters in grids.

1. Renderer not working from the beginning, works after a filter is applied.
At first, dtSizes is undefined, so code breaks and column values are not displayed
2. ListFilter for Size column does not work.
Since ValidateRecord is no longer available starting v2.5, could you give me light on another approach?

I prepared a test case based upon an example.



<%@ Page Language="C#" %>

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

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

ListFilter lf = (ListFilter)SizeCol.Filter[0];
lf.Options = OptionTestData.Data.Select(n => n.Name).ToArray();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>GridFIlters Text</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var showSize = function (value) {
var r = App.dtSizes.getById(value);
if (Ext.isEmpty(r)) {
return "";
}
return r.data.Name;
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<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">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
<Filter>
<ext:StringFilter />
</Filter>
</ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField runat="server" AllowBlank="false" MinValue="1" MaxValue="150000" />
</Editor>
<Filter>
<ext:NumberFilter />
</Filter>
</ext:Column>
<ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd">
<Editor>
<ext:DateField ID="dateeditor" Format="yyyy-MM-dd" runat="server" AllowBlank="false" MinDate="01.01.2013 00:00" />
</Editor>
<Filter>
<ext:DateFilter>
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
</Filter>
</ext:DateColumn>
<ext:Column runat="server" Text="Size" DataIndex="Size" ID="SizeCol">
<Renderer Fn="showSize" />
<Editor>
<ext:ComboBox ID="cbSizes" runat="server" AllowBlank="false" ForceSelection="true" Editable="false"
DisplayField="Name" ValueField="Id" TriggerAction="All">
<Store>
<ext:Store ID="dtSizes" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Mapping="Id" Type="Int" />
<ext:ModelField Name="Name" Mapping="Name" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Editor>
<Filter>
<ext:ListFilter />
</Filter>
</ext:Column>
<ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
<Renderer Handler="return (value) ? 'Yes':'No';" />
<Editor>
<ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
</Editor>
<Filter>
<ext:BooleanFilter />
</Filter>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:GridFilters runat="server" />
<ext:RowEditing runat="server" AutoCancel="false" />
</Plugins>
<BottomBar>
<ext:PagingToolbar runat="server" HideRefresh="True" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Window>
</body>
</html>




using System;
using System.Collections.Generic;

public class FilterTestData
{
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 = 1,
Visible = true
},
new
{
Id = 2,
Price = 29.01,
Company = "Aloca Inc",
Date = new DateTime(2014, 08, 01),
Size = 2,
Visible = false
},
new
{
Id = 3,
Price = 83.81,
Company = "Altria Group Inc",
Date = new DateTime(2014, 08, 03),
Size = 1,
Visible = false
},
new
{
Id = 4,
Price = 52.55,
Company = "American Express Company",
Date = new DateTime(2015, 01, 04),
Size = 4,
Visible = true
},
new
{
Id = 5,
Price = 64.13,
Company = "American International Group Inc.",
Date = new DateTime(2015, 03, 04),
Size = 3,
Visible = true
},
new
{
Id = 6,
Price = 31.61,
Company = "AT&T Inc.",
Date = new DateTime(2015, 02, 01),
Size = 4,
Visible = false
},
new
{
Id = 7,
Price = 75.43,
Company = "Boeing Co.",
Date = new DateTime(2015, 01, 01),
Size = 1,
Visible = true
},
new
{
Id = 8,
Price = 67.27,
Company = "Caterpillar Inc.",
Date = new DateTime(2014, 12, 03),
Size = 2,
Visible = true
},
new
{
Id = 13,
Price = 30.27,
Company = "General Motors Corporation",
Date = new DateTime(2013, 12, 07),
Size = 2,
Visible = true
},
new
{
Id = 21,
Price = 27.96,
Company = "Pfizer Inc",
Date = new DateTime(2014, 12, 30),
Size = 3,
Visible = false
},
};

return goods;
}
}
}




using System;
using System.Collections.Generic;

public class OptionTestData
{
public static List<Size> Data
{
get
{
List<Size> sizes = new List<Size>
{
new Size()
{
Id = 1,
Name = "large"
},
new Size()
{
Id = 2,
Name = "medium"
},
new Size()
{
Id = 3,
Name = "small"
},
new Size()
{
Id = 4,
Name = "extra large"
}
};

return sizes;
}
}
}

public class Size
{
public int Id { get; set; }
public string Name { get; set; }
}


Thank you

fabricio.murta
Dec 18, 2019, 6:22 PM
Hello @aluna!

I'll point in your sample what's wrong. Please try to understand and fix on your side, so you can port this to your effective test case. If you still have questions about some aspects or changes provided, please let us know.

1. move your Size column's store outside the grid: create a <bin> block within the ext:GridPanel block, and add the store inside it.
2. In the combo box from the editor, add StoreID="dtSizes". It can become then a self-closing tag.

This will solve the "race condition" you're getting as the store is not ready as you need to work with it. Editor components are rendered after the grid's renderer. Leaving it within <bin> blocks is a safe place to leave any "invisible" components like the store, yet guaranteeing they are present in the page consistently.

Then let's move to the next step: the list filter. The answer for you is here: ListFilter with mappings (https://forums.ext.net/showthread.php?11414&p=46449&viewfull=1#post46449).

Understanding that, your ASPX code block, line 115, the <ext:ListFilter /> self-closing tag needs to be changed into:



<ext:ListFilter StoreID="dtSizes" LabelField="Name" IDField="Id" />


Then you'd have a working filter. Why do you need that? Because your filter should not be applied over what's rendered to the grid cells, but they are ruled by what is in the store for that cell.

And now that you're properly mapping the names into IDs in the store, you may also want to set the corresponding fields to the same type.

In your code behind code for FilterTestData line 18, for instance, you provide the value for Size as an Integer.
In your code behind code for OptionTestData line 14, you provide the Id field as Integer as well.

That's good so far.

In your store model, ASPX code line 51, you determine the Size field as String; and this doesn't look good, although it should work as long you're providing string parseable into int.
Still in the ASPX options store, line 105 you specified Id field as Integer, which now is good.

So I suggest you double check in your application also to try to keep consistent in these types to avoid issues, although in this case it should work just fine.

Hope this helps!

Alex Luna
Dec 18, 2019, 7:57 PM
Thank you Fabricio, ListFilter from Store works as expected.

By the way, is it possible to avoid the two clicks needed on filter arrow to get the filter menu displayed? First click selects header cell, second click shows the menu.

Thank you
Regards
Alex

fabricio.murta
Dec 19, 2019, 1:06 PM
Hello Alex!

I don't need to do the two clicks you are talking about. Which browser are you using that you reproduce this?

I click once in the header's arrow pointing down and menu is displayed.
Once I hover the mouse over the 'filter' entry, without any click, the options are expanded.
And when I choose one of the filters, the checkbox in the upper level 'filter' entry is checked at once.

Looking forward to your follow up!

Alex Luna
Dec 19, 2019, 2:02 PM
Hello Fabricio,

Grid is not focused.
Using Firefox 71, two clicks are needed on down arrow to get filter menu displayed.
Using Chrome 79, Opera 65, Edge and IE 11 only one clic is needed.

Regards

fabricio.murta
Dec 20, 2019, 8:29 PM
Hello Alex!

I'm afraid we have a bug coming deeper from bare Ext JS, as I can reproduce this behavior with Ext JS standalone example using grid filter at Ext JS 7.0.0 Examples > Kitchen Sink > Grids > Add-Ons and Decorations > Grid Filtering (https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/?classic#grid-filtering).

This issue may have been introduced in recent firefox versions, as I see no report from Ext JS side about this nuisance.

I have created an issue to track this defect under #1685 (https://github.com/extnet/Ext.NET/issues/1685); unfortunately we don't have a quick fix for this at the moment. As this thread is not really related to the issue you pointed, I'd ask you to create a new thread specific to the firefox clicking issue if you want feedback once this is fixed in Ext.NET.

Hope this helps!

Alex Luna
Dec 20, 2019, 8:42 PM
Thank you Fabricio, please close this thread.
Regards