Hi,
Please see my sample below. I can't seem to get the filter to work consisitently between the locked and unlocked columns. Please offer some assistance.
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 id="Head1" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<%-- Override the default label seperator and set to ""--%>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.Component.prototype.labelSeparator = "";
</script>
<script src="/Scripts/GridView.js" type="text/javascript"></script>
<style type="text/css">
.Header
{
font: 12px helvetica,arial,sans-serif;
}
.list-over
{
background-color: white;
}
.my-listview .x-list-body dt
{
white-space: normal;
cursor: arrow;
}
</style>
<script type="text/javascript">
var formatDate = function (v) {
return value.format(Common.GetJSDateFormat());
};
</script>
</head>
<body>
<ext:ResourceManager runat="server">
<Listeners>
</Listeners>
</ext:ResourceManager>
<ext:Viewport ID="viewportResultView" runat="server" Layout="FitLayout" IDMode="Static">
<Items>
<ext:GridPanel ID="gridPanelGridView" EnableLocking ="true" runat="server" Region="Center">
<TopBar>
<ext:Toolbar runat ="server">
<Items>
<ext:Button runat ="server" Text ="Load With Error">
<Listeners>
<Click Handler="GridView.LoadAndThrowError();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<SelectionModel>
<ext:RowSelectionModel runat="server" PruneRemoved="false" Mode="Multi" />
</SelectionModel>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" Width="50" Sortable="false" />
</Columns>
<Listeners>
</Listeners>
</ColumnModel>
<Store>
<ext:Store runat="server" Buffered="true" PageSize="5">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="dummy" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Features>
<ext:GridFilters runat="server" ID="gridFiltersGridView" Local="false" MenuFilterText="temp"
ParamPrefix="filter" AutoDataBind="true">
<Filters>
<ext:BooleanFilter />
</Filters>
<Listeners>
</Listeners>
</ext:GridFilters>
</Features>
<View>
<ext:GridView LoadingText="" LoadMask="false">
<Listeners>
<BeforeRender Handler="GridView.InitializeView();" />
</Listeners>
</ext:GridView>
</View>
<Listeners>
<CellDblClick Fn="" />
<ContainerContextMenu Fn="" />
</Listeners>
</ext:GridPanel>
</Items>
<Listeners>
<Render />
</Listeners>
</ext:Viewport>
</body>
</html>
Controller
public class GridController : Controller
{
//
// GET: /Grid/
public ActionResult Index()
{
return View();
}
public StoreResult GetData( string filter, Boolean throwerror , int Start = 0, int PageSize =1, int PageIndex = 1)
{
StoreResult response = new StoreResult();
List<User> data = new List<User>();
Random randow = new Random();
DateTime now = DateTime.Now;
for (int i = Start + 1; i <= Start + PageSize; i++)
{
User user = new User()
{
Firstname = "User " + i,
Lastname = "User Last " + i,
Age = i + 23
};
data.Add(user);
}
response.Data = data;
response.Total = 3000;
return response;
}
}
public class User
{
public String Firstname { get; set; }
public String Lastname { get; set; }
public int Age { get; set; }
}
JavaScript
Ext.override(Ext.grid.Panel, {
normalCfgCopy: ['invalidateScrollerOnRefresh', 'verticalScroller', 'verticalScrollDock', 'verticalScrollerType', 'scroll', 'features'],
lockedCfgCopy: ['invalidateScrollerOnRefresh', 'features']
});
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'company'
}, {
name: 'price',
type: 'float'
}, {
name: 'date',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'visible',
type: 'boolean'
}, {
name: 'size'
}]
});
GridView = {
InitializeView: function () {
GridView.ReconfigureGrid();
},
CheckBoxHeaderClicked: function (e, t) {
if (t && t.type === "checkbox" && t.id === "gridview-header-checkbox-columnWorkItemSelections") {
var dataIndex = t.getAttribute('dataIndex');
var grid = App.gridPanelGridView;
grid.store.each(function (record) {
record.data[dataIndex] = t.checked;
});
grid.store.commitChanges();
grid.view.refresh();
}
},
ReconfigureGrid: function () {
var columns = [
{
Xtype: "checkcolumn",
editable: true,
menuDisabled: true,
dataIndex: "columnWorkItemSelections",
onElClick: GridView.CheckBoxHeaderClicked,
renderTpl: "<div id=\"{id}-titleEl\" {tipMarkup}class=\"x-column-header-inner gridview-header-container\"> <span id=\"{id}-textEl\" class=\"x-column-header-text\"><input id=\"gridview-header-checkbox-{id}\" type=\"checkbox\" dataIndex =\"columnWorkItemSelections\" class=\"gridview-header-checkbox\"></input>{text} </span> <tpl if=\"!menuDisabled\"> <div id=\"{id}-triggerEl\" class=\"x-column-header-trigger\"></div> </tpl> </div>"
}];
columns.push({ Xtype: "gridcolumn", text: 'First Name', dataIndex: 'Firstname', sourceIndex: "Firstname", locked: true, renderer: "", resizable: true, editable: false, isIcon: false, datatype: "string", hidden: false, width: 100, hasCheckBoxColumn: false });
columns.push({ Xtype: "gridcolumn", text: 'Last Name', dataIndex: 'Lastname', sourceIndex: "Lastname", locked: true, renderer: "", resizable: true, editable: false, isIcon: false, datatype: "string", hidden: false, width: 100, hasCheckBoxColumn: false });
columns.push({ Xtype: "gridcolumn", text: 'Age', dataIndex: 'Age', sourceIndex: "Age", locked: true, renderer: "", resizable: true, editable: false, isIcon: false, datatype: "string", hidden: false, width: 100, hasCheckBoxColumn: false });
var cols = new Array();
for (var index = 0; index < columns.length; index++) {
cols.push(columns[index]);
}
var fields = [{ type: 'boolean', name: 'columnWorkItemSelections' }, { name: 'Firstname', type: 'string' }, { name: 'Lastname', type: 'string' }, { name: 'Age', type: 'int'}];
var grid = App.gridPanelGridView;
var store = GridView.CreateStore(fields);
grid.reconfigureLockable(store, columns);
GridView.SetGridFilters(columns, fields, store);
store.loadPage(1);
},
CreateStore: function (fields) {
return Ext.create('Ext.data.JsonStore', {
remoteSort: true,
remoteFilter: true,
buffered: true,
fields: fields,
autoLoad: false,
pageSize: 1000,
showWarningOnFailure: false,
proxy: {
type: "ajax",
url: "/Grid/GetData",
reader: {
root: "data",
type: "json",
totalProperty: 'total',
messageProperty: "message"
},
extraParams: {
ResultSetId: 1,
WorkflowStateId: 1,
TimePeriodId: 1,
RiskId: 1,
WorkitemPropertyId: 1,
WorkItemTypeId: 1,
TotalRecords: 1,
ResultSetTableName: 'namwe',
ResultSetLinkTableName: 'name'
},
groupParam: "Group",
limitParam: "PageSize",
pageParam: "PageIndex",
directionParam: "SortDirection",
sortParam: "Sort",
startParam: "Start",
listeners: {
exception: { fn: function (el, response, operation, eOpts) {
alert(operation.getError());
}
}//end exception
}
},
listeners: {
beforeload: { fn: function (store, operation, eOpts) {
var throwerror = false;
if (operation.throwerror) {
throwerror = operation.throwerror;
}
//Apply additional filter params
Ext.apply(store.getProxy().extraParams, {
throwerror: throwerror
});
}
},
load: { fn: function (store, operation, eOpts) {
//parent.Common.UnMask();
}
},
exception: { fn: function (el, response, operation, eOpts) {
alert(operation.getError());
}
}//end exception
}
});
},
SetGridFilters: function (columns, fields, store) {
App.gridPanelGridView.lockedGrid.filters.clearFilters();
App.gridPanelGridView.normalGrid.filters.clearFilters();
for (var i = 0; i < columns.length; i++) {
for (var j = 0; j < fields.length; j++) {
if (columns[i].dataIndex == fields[j].name) {
App.gridPanelGridView.normalGrid.filters.addFilter({ dataIndex: columns[i].dataIndex, type: fields[j].type });
App.gridPanelGridView.lockedGrid.filters.addFilter({ dataIndex: columns[i].dataIndex, type: fields[j].type });
break;
}
}
}
App.gridPanelGridView.lockedGrid.bindStore(store);
App.gridFiltersGridView.bindStore(store);
},
LoadAndThrowError: function () {
App.gridPanelGridView.store.loadPage(1, { throwerror: true });
},
CreateGrid: function (columns, fields) {
var store = Ext.create('Ext.data.JsonStore', {
// store configs
autoDestroy: true,
remoteSort: true,
remoteFilter: true,
autoLoad: false,
buffered: true,
fields: fields,
proxy: {
type: 'ajax',
url: "/Grid/GetData",
reader: {
type: 'json',
root: 'data',
idProperty: 'id',
totalProperty: 'total'
}
},
groupParam: "Group",
limitParam: "PageSize",
pageParam: "PageIndex",
directionParam: "SortDirection",
sortParam: "Sort",
startParam: "Start",
remoteSort: false,
sorters: [{
property: 'Age',
direction: 'ASC'
}],
pageSize: 1000
});
var grid = Ext.create('Ext.grid.Panel', {
border: false,
store: store,
columns: columns,
loadMask: true
});
var win = Ext.create('Ext.Window', {
title: 'Grid Filters Example',
height: 400,
width: 700,
layout: 'fit',
items: grid
}).show();
store.load();
}
}
Originally Posted by RCM
