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>
