Hi,
Please look at the example.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Linq" %>
<script runat="server">
public class Test
{
public string Test1 { get; set; }
public string Test2 { get; set; }
}
public static List<Test> MyData =
new List<Test>()
{
new Test()
{
Test1 = "test1",
Test2 = "test11",
},
new Test()
{
Test1 = "test1",
Test2 = "test12",
},
new Test()
{
Test1 = "test2",
Test2 = "test21",
}
};
public void BindData()
{
Store store = this.GridPanel1.GetStore();
store.DataSource = MyData;
store.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
[DirectMethod]
public void Filter(string field, string value)
{
var data = new List<Test>();
foreach (Test t in MyData)
{
object oValue = t.GetType().GetProperty(field).GetValue(t, null);
if (oValue.ToString().Equals(value))
{
data.Add(t);
}
}
Store store = this.GridPanel1.GetStore();
store.DataSource = data;
store.DataBind();
}
protected void Reset(object sender, DirectEventArgs e)
{
this.BindData();
}
</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 onContextMenu = function (grid, e) {
var rowIndex = grid.view.findRowIndex(e.getTarget()),
cellIndex = grid.view.findCellIndex(e.getTarget()),
record = grid.getStore().getAt(rowIndex),
fieldName = grid.getColumnModel().getDataIndex(cellIndex),
data = record.get(fieldName);
grid.currentSelection =
{
row : rowIndex,
column : cellIndex,
fieldName : fieldName,
data : data
};
Ext.fly(grid.view.getCell(rowIndex, cellIndex)).addClass("selected-cell");
e.preventDefault();
};
var onClick = function (grid) {
Ext.fly(grid.view.getCell(
grid.currentSelection.row,
grid.currentSelection.column)).removeClass("selected-cell");
Ext.net.DirectMethods.Filter(
grid.currentSelection.fieldName,
grid.currentSelection.data);
};
</script>
<style type="text/css">
.selected-cell {
background-color: Red;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
AutoHeight="true"
ContextMenuID="Menu1">
<Store>
<ext:Store runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Test1" />
<ext:RecordField Name="Test2" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="Test1" />
<ext:Column Header="Test2" DataIndex="Test2" />
</Columns>
</ColumnModel>
<Listeners>
<ContextMenu Handler="onContextMenu(this, e);" />
</Listeners>
</ext:GridPanel>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem Text="Filter by selection">
<Listeners>
<Click Handler="onClick(GridPanel1);" />
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>
<ext:Button runat="server" Text="Reset" OnDirectClick="Reset" />
</form>
</body>
</html>
