Hi ,
I tried to implement a simple locking feature here but the columns are not be locked. See sample below. I would like to be able to do the locking dynamically as well. The locking seem to be broken once the filters feature is used. Please advise..
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" 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>
</Listeners>
</ext:GridView>
</View>
<Listeners>
<CellDblClick Fn="" />
<ContainerContextMenu Fn="" />
<ViewReady Handler="GridView.InitializeView();" />
</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(int Start, int PageSize, int PageIndex, string filter, Boolean throwerror)
{
if (throwerror)
{
StoreResult store = new StoreResult();
store = this.Store("some error");
return store;
}
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
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>"} ,
{ text: 'First Name', dataIndex: 'Firstname', locked: true, lockable: true }, { text: 'Last Name', dataIndex: 'Lastname', locked: true}, { text: 'Age', dataIndex: 'Age', locked: false}];
var fields = [{type:'boolean', name: 'columnWorkItemSelections' }, { name: 'Firstname', type: 'string' }, { name: 'Lastname', type: 'string'}, { name: 'Age', type: 'int'}];
Xtype = "checkcolumn"
var grid = App.gridPanelGridView;
// var store = grid.store;
//var oldStore = store;
//store.removeAll();
var store = GridView.CreateStore(fields);
grid.reconfigure(store, columns);
GridView.SetGridFilters(columns, fields, store);
store.loadPage(1);
//oldStore.destroy();
},
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.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.filters.addFilter({ dataIndex: columns[i].dataIndex, type: fields[j].type });
break;
}
}
}
App.gridFiltersGridView.bindStore(store);
},
LoadAndThrowError: function () {
App.gridPanelGridView.store.loadPage(1, { throwerror: true });
},
}
