Please see the example.
Example
<%@ 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)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", 1 },
new object[] { "test2", 0 },
new object[] { "test3", 1 }
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var showTip = function () {
var rowIndex = GridPanel1.view.findRowIndex(this.triggerElement),
cellIndex = GridPanel1.view.findCellIndex(this.triggerElement),
record = GridPanel1.getStore().getAt(rowIndex),
fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex),
data = record.get(fieldName);
this.body.dom.innerHTML = GridPanel1.getColumnModel().columns[cellIndex].renderer(data);
};
</script>
<script type="text/javascript">
var applyFilter = function (field) {
var store = GridPanel1.getStore();
store.suspendEvents();
store.filterBy(getRecordFilter());
store.resumeEvents();
GridPanel1.getView().refresh(false);
};
var clearFilter = function () {
StringFilter.reset();
BooleanFilter.reset();
GridPanel1.getStore().clearFilter();
};
var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);
if (typeof val !== "string") {
return value.length == 0;
}
return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};
var filterBoolean = function (value, dataIndex, record) {
var val = record.get(dataIndex);
val = val === 1 ? true : false;
return value === val ;
};
var getRecordFilter = function () {
var f = [];
f.push({
filter: function (record) {
return filterString(StringFilter.getValue(), "test1", record);
}
});
f.push({
filter: function (record) {
return filterBoolean(BooleanFilter.getValue(), "test2", record);
}
});
var len = f.length;
return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
</script>
<style type="text/css">
.editor-checkbox .x-form-cb-label {
margin-left: 0px;
display: none;
}
.editor-checkbox .x-form-check-wrap {
text-align: center;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="200">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
DataIndex="test1"
Header="String" />
<ext:BooleanColumn
DataIndex="test2"
Header="Boolean"
FalseText="No"
TrueText="Yes"
Width="55" />
<ext:Column
Width="28"
DataIndex="test"
Sortable="false"
MenuDisabled="true"
Header=" "
Fixed="true">
<Renderer Handler="return '';" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="StringFilter" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn AutoWidthElement="false" Cls="x-small-editor editor-checkbox">
<Component>
<ext:Checkbox ID="BooleanFilter" runat="server">
<Listeners>
<Check Handler="applyFilter(this);" />
</Listeners>
</ext:Checkbox>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn AutoWidthElement="false">
<Component>
<ext:Button runat="server" Icon="Cancel">
<ToolTips>
<ext:ToolTip runat="server" Html="Clear filter" />
</ToolTips>
<Listeners>
<Click Handler="clearFilter(null);" />
</Listeners>
</ext:Button>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:ToolTip
runat="server"
Target="={GridPanel1.getView().mainBody}"
Delegate=".x-grid3-cell"
TrackMouse="true">
<Listeners>
<Show Fn="showTip" />
</Listeners>
</ext:ToolTip>
</form>
</body>
</html>