Hi Daniil, please refer to the code sample below. Note that after commenting out the isHidden() override this method reverts back to its unreliable self.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = this.Jobs;
this.Store1.DataBind();
var sortInfo = new Ext.Net.SortInfo { Field = "Name", Direction = Ext.Net.SortDirection.DESC };
GridPanel1.GetStore().Sort(sortInfo.Field, sortInfo.Direction);
}
private List<Job> Jobs
{
get
{
List<Job> jobs = new List<Job>();
for (int i = 1; i <= 50; i++)
{
jobs.Add(new Job(
i,
"Task" + i.ToString(),
DateTime.Today.AddDays(i),
DateTime.Today.AddDays(i + i),
(i % 3 == 0)));
}
return jobs;
}
}
public class Job
{
public Job(int id, string name, DateTime start, DateTime end, bool completed)
{
this.ID = id;
this.Name = name;
this.Start = start;
this.End = end;
this.Completed = completed;
}
public int ID { get; set; }
public string Name { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool Completed { get; set; }
}
protected void ButtonReconfigure_Click(object sender, DirectEventArgs e)
{
GridPanel1.Render();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<script type="text/javascript" language="javascript">
// Display non-hideable columns as checked off and disabled in the column menu selector
Ext.override(Ext.grid.GridView, {
beforeColMenuShow: function () {
var colModel = this.cm,
colCount = colModel.getColumnCount(),
colMenu = this.colMenu,
i;
colMenu.removeAll();
for (i = 0; i < colCount; i++) {
if (!colModel.getColumnHeader(i) || colModel.getColumnHeader(i).trim() == "") continue;
colMenu.add(new window.Ext.menu.CheckItem({
text: colModel.getColumnHeader(i),
itemId: 'col-' + colModel.getColumnId(i),
checked: !colModel.isHidden(i),
disabled: colModel.config[i].hideable === false,
hideOnClick: false
}));
}
}
});
Ext.grid.ColumnModel.override({
// Comment out this override to see the faulty behaviour of isHidden()
isHidden: function (colIndex) {
return colIndex >= 0 && !!this.config[colIndex].hidden;
},
isHideable: function (colIndex) {
return colIndex >= 0 && (typeof this.config[colIndex].hideable == "undefined" || !!this.config[colIndex].hideable);
}
});
var myOnHeaderClick = function (g, index) {
if (this.headersDisabled || !this.cm.isSortable(index)) {
return;
}
g.stopEditing(true);
g.store.sort(this.cm.getDataIndex(index));
alert("Sorting by header click");
};
var showOriginalColumnConfig = function () {
var grid = GridPanel1;
var columnModel = grid.getColumnModel();
var columnString = "";
for (var i = 0; i < columnModel.columns.length; i++) {
var column = columnModel.columns[i];
columnString += "Column ID: " + column.id + "; Is Hidden: " + columnModel.isHidden(columnModel.getIndexById(column.id)) + "; Is Hideable: " + column.hideable + "\r\n";
}
alert(columnString);
};
var showFixedColumnConfig = function () {
var grid = GridPanel1;
var columnModel = grid.getColumnModel();
var columnString = "";
for (var i = 0; i < columnModel.columns.length; i++) {
var column = columnModel.columns[i];
columnString += "Column ID: " + column.id + "; Is Hidden: " + columnModel.isHidden(columnModel.getIndexById(column.id)) + "; Is Hideable: " + columnModel.isHideable(columnModel.getIndexById(column.id)) + "\r\n";
}
alert(columnString);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Height="320" MinHeight="160"
Region="North" CollapseMode="Mini" Split="true">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="true" WarningOnDirty="false">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Start" Type="Date" />
<ext:RecordField Name="End" Type="Date" />
<ext:RecordField Name="Completed" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<LoadMask ShowMask="false" />
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="ID" Header="ID" Width="40" DataIndex="ID" Hideable="false" />
<ext:Column ColumnID="Name" Width="160" Header="Job Name" DataIndex="Name" Hideable="true" />
<ext:DateColumn ColumnID="Start" Header="Start" Width="120" DataIndex="Start" Format="yyyy-MM-dd" />
<ext:DateColumn ColumnID="End" Header="End" Width="120" DataIndex="End" Format="yyyy-MM-dd" />
<ext:Column ColumnID="Completed" Header="Completed" Width="80" DataIndex="Completed">
<Renderer Handler="return (value) ? 'Yes':'No';" />
</ext:Column>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" DisplayInfo="true"
DisplayMsg="Displaying Jobs {0} - {1} of {2}">
<Items>
<ext:Button runat="server" ID="Button1" Text="Show Original Config">
<Listeners>
<Click Handler="showOriginalColumnConfig();" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="Button2" Text="Show Fixed Config">
<Listeners>
<Click Handler="showFixedColumnConfig();" />
</Listeners>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
<View>
<ext:GridView ID="GridView1" runat="server">
</ext:GridView>
</View>
<Listeners>
<ViewReady Handler="var view = this.getView();
this.un('headerclick', view.onHeaderClick, view);
this.on('headerclick', myOnHeaderClick, view);
this.getStore().load();" />
</Listeners>
</ext:GridPanel>
<ext:Panel ID="Panel1" runat="server" Region="Center" Border="false" Frame="true"
Layout="FitLayout" AutoScroll="false">
<Items>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Originally Posted by Daniil
