Feb 19, 2014, 1:12 PM
[CLOSED] Grid Panel Column Filtering?
Can we override text Field/Numeric Fields in FilterMenu in Column Header's Toolbar/Menu with Combo box for Column6 in grid ? Is it possible?
<%@ 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[] { 1,"1group", "1", "1" },
new object[] { 1,"1group", "11", "11" },
new object[] { 1,"1group", "111", "111" },
new object[] { 2,"2group", "2", "2" },
new object[] { 2,"2group", "22", "22" },
new object[] { 2,"2group", "222", "222" },
new object[] { 3,"3group", "3", "3" },
new object[] { 3,"3group", "33", "33" },
new object[] { 3,"3group", "333", "333" },
new object[] { 11,"11group", "11", "11" },
new object[] { 11,"11group", "1111", "1111" },
new object[] { 11,"11group", "11111", "11111" }
};
storeCombo.DataSource = new object[]
{
new object[] { 1,"1group"},
new object[] { 2,"2group" },
new object[] { 3,"3group" },
new object[] { 11,"11group"},
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script>
var comboRenderer = function (value) {
var r = App.storeCombo.getById(value);
if (Ext.isEmpty(r)) {
return value;
}
return r.data.GroupName;
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="storeCombo" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="GroupId">
<Fields>
<ext:ModelField Name="GroupId" />
<ext:ModelField Name="GroupName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="storeGrid" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="GroupId" Type="Int" />
<ext:ModelField Name="GroupName" />
<ext:ModelField Name="TestCol1" />
<ext:ModelField Name="TestCol2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="storeGrid">
<Features>
<ext:Grouping ID="Grouping1" runat="server">
<GroupHeaderTpl ID="GroupHeaderTpl1" runat="server">
<Html>
<tpl if="groupField === 'GroupId'">
{columnName}: {[ values.children[0].data.GroupName ]}
<tpl else>
{columnName}: {name}
</tpl>
</Html>
</GroupHeaderTpl>
</ext:Grouping>
<ext:GridFilters Local="True">
<Filters>
<ext:StringFilter DataIndex="GroupName" />
<ext:StringFilter DataIndex="GroupId" />
</Filters>
</ext:GridFilters>
</Features>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column6" runat="server" Text="Group Select" DataIndex="GroupId" Sortable="true" Filterable="true">
<CustomConfig>
<ext:ConfigItem Name="getSortParam" Value="function() { return 'GroupName'; }" Mode="Raw" />
<ext:ConfigItem Name="getFilterParam" Value="function() { return 'GroupName'; }" Mode="Raw" />
</CustomConfig>
<Renderer Fn="comboRenderer" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="storeCombo" DisplayField="GroupName" ValueField="GroupId" Editable="False">
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Test Col1" DataIndex="TestCol1" />
<ext:Column ID="Column4" runat="server" Text="Test Col2" DataIndex="TestCol2" />
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Feb 21, 2014 at 4:42 AM.
Reason: [CLOSED]
