Dec 17, 2019, 9:58 PM
[CLOSED] GridFIlters: ListFilter not working
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.
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; }
}
Last edited by aluna; Dec 17, 2019 at 10:00 PM.
