PDA

View Full Version : [CLOSED] FilterHeader issue



iyeremuk
Jan 14, 2015, 1:10 PM
Greetings,
I am using a FilterHeader in my grid, and it works perfectly with regular values.
However, when I enclose my values in HTML tags, such as
<span class='green'>Yes</span>, it no longer filters those values (even though they are displayed normally in the grid). Is there any workaround for this case? Thank you kindly.

Sergei
Jan 14, 2015, 2:10 PM
Hi!

If you need a simple HTML wrapper for your values, you can use a Column's Renderer, like in this sample:



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new List<object>
{
new {Id = 1, Company = "yes"},
new {Id = 2, Company = "no"},
new {Id = 3, Company = "yes"},
new {Id = 4, Company = "no"},
new {Id = 5, Company = "no"},
new {Id = 6, Company = "no"}
};
this.Store1.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Custom Behaviour for FilterHeader - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
Ext.net.FilterHeader.behaviour.addBehaviour("string", {
name: "any",

is: function (value) {
return Ext.net.StringUtils.startsWith(value, "any ");
},

getValue: function (value) {
var values = Ext.net.FilterHeader.behaviour.getStrValue(value). substring(4).split(" "),
tmp = [];

Ext.each(values, function (v) {
v = v.trim();
if (!Ext.isEmpty(v)) {
tmp.push(v);
}
});

values = tmp;

return { value: values, valid: values.length > 0 };
},

match: function (recordValue, matchValue) {
for (var i = 0; i < matchValue.length; i++) {
if (recordValue === matchValue[i]) {
return true;
}
}

return false;
},

isValid: function (value) {
return this.getValue(value, field).valid;
},

serialize: function (value) {
return {
type: "string",
op: "any",
value: value
};
}
});



var template = '<span style="color:{0};">{1}</span>';

var Company = function (value) {
return Ext.String.format(template, (value == 'yes') ? "green" : "red", value);
};



</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Custom Behaviour for FilterHeader</h1>
<p>This examples demonstrates how to add custom behaviour for filtering</p>
<p>Custom behaviour: search any of values from list (string filter)</p>
<p>Example: any C1 C2</p>

<ext:Window
ID="Window1"
runat="server"
Width="400"
Height="250"
Closable="false"
Title="Example"
Layout="Fit">
<Items>
<ext:GridPanel runat="server">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Company" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="Id" Filterable="false" Width="40" />
<ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1">
<Renderer Fn="Company" />
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader runat="server" />
</Plugins>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Filter Set 1" Handler="this.up('grid').filterHeader.setValue({Company: 'any C1 C3'});" />
<ext:Button runat="server" Text="Filter Set 2" Handler="this.up('grid').filterHeader.setValue({Company: 'any C2 C4'});" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Window>
</form>
</body>
</html>

iyeremuk
Jan 16, 2015, 12:43 PM
This works for me. Thank you for your help. Please mark it as resolved.