May 20, 2014, 3:15 PM
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ 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">
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.net.GridPanel.prototype.doSelection = Ext.net.GridPanel.prototype.doSelection.createInterceptor(function () {
this.getSelectionModel();
});
Ext.ux.grid.ColumnHeaderGroup.prototype.viewConfig.handleHdDown = function (e, t) {
var el = Ext.get(t);
if (el.hasClass('x-grid3-hd-btn')) {
var hd, index, ms, cm;
e.stopEvent();
hd = this.findHeaderCell(t);
Ext.fly(hd).addClass('x-grid3-hd-menu-open');
index = this.getCellIndex(hd);
this.hdCtxIndex = index;
ms = this.hmenu.items;
cm = this.cm;
ms.get('asc').setDisabled(!cm.isSortable(index));
ms.get('desc').setDisabled(!cm.isSortable(index));
this.hmenu.on('hide', function () {
Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
}, this, {
single: true
});
this.hmenu.show(t, 'tl-bl?');
} else if (el.hasClass('ux-grid-hd-group-cell') || Ext.fly(t).up('.ux-grid-hd-group-cell')) {
e.stopEvent();
var hd, index, ms, cm;
hd = this.findHeaderCell(t);
index = this.getCellIndex(hd);
alert(Ext.fly(hd).down(".x-grid3-hd-inner").dom.childNodes[1].data);
}
}
</script>
<script runat="server">
[DirectMethod]
public void Prepare_Click(object sender, DirectEventArgs e)
{
PrepareGrid(myGrid);
}
private void PrepareGrid(GridPanel grid)
{
var columns = new string[] { "Text1", "Num1", "Text2", "Num2", "Comments" };
foreach (string col in columns)
{
Column newCol = new Column { Header = col, DataIndex = col, Width = 120, MenuDisabled = true, Sortable = false };
grid.ColumnModel.Columns.Add(newCol);
}
var headerGroupRow = grid.View.View.HeaderGroupRows[0];
var headerGroups = new[] { new { Header = "Group 1", Span = 2 }, new { Header = "Group 2", Span = 2 }, new { Header = "", Span = 1 } };
foreach (var header in headerGroups)
{
headerGroupRow.Columns.Add(new HeaderGroupColumn
{
Header = header.Header,
Align = Alignment.Center,
ColSpan = header.Span,
});
}
grid.Controls.RemoveAt(0);
grid.Render();
}
[DirectMethod]
public void Load_Click(object sender, DirectEventArgs e)
{
DataTable data = new DataTable();
data.Columns.Add("Date", typeof(DateTime));
data.Columns.Add("Text1", typeof(string));
data.Columns.Add("Num1", typeof(int));
data.Columns.Add("Text2", typeof(string));
data.Columns.Add("Num2", typeof(int));
data.Columns.Add("Comments", typeof(string));
data.Rows.Add(DateTime.Now, "Line 1", 10, "Some text", 20, "Correct");
data.Rows.Add(DateTime.Now.AddDays(1).AddHours(1), "Line 2", 15, "More text", 25, "Wrong");
this.strDemo.DataSource = data;
this.strDemo.DataBind();
}
</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 id="Head1" runat="server">
<title>Dynamic Grid Column Header Click Problem</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="strDemo" runat="server">
<Reader>
<ext:JsonReader IDProperty="Date">
<Fields>
<ext:RecordField Name="Date" Type="Date" />
<ext:RecordField Name="Text1" Type="String" />
<ext:RecordField Name="Num1" Type="Int" />
<ext:RecordField Name="Text2" Type="String" />
<ext:RecordField Name="Num2" Type="Int" />
<ext:RecordField Name="Comments" Type="String" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel runat="server" Region="West" Width="100">
<Items>
<ext:Button runat="server" ID="btnPrepare" Text="Prepare Grid">
<DirectEvents>
<Click OnEvent="Prepare_Click" />
</DirectEvents>
</ext:Button>
<ext:Button runat="server" ID="btnLoad" Text="Load data">
<DirectEvents>
<Click OnEvent="Load_Click" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="Center">
<Items>
<ext:GridPanel ID="myGrid" runat="server" StoreID="strDemo" AutoHeight="true" EnableColumnMove="false" EnableColumnResize="false">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:DateColumn Header="Day" DataIndex="Date" Format="MM/dd/yyyy" MenuDisabled="true" Sortable="false" />
<ext:DateColumn Header="Time" DataIndex="Date" Format="HH:mm:ss" MenuDisabled="true" Sortable="false" />
</Columns>
</ColumnModel>
<View>
<ext:GroupingView>
<HeaderGroupRows>
<ext:HeaderGroupRow>
<Columns>
<ext:HeaderGroupColumn Header="Date" ColSpan="2" Align="Center" />
</Columns>
</ext:HeaderGroupRow>
</HeaderGroupRows>
</ext:GroupingView>
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>Thanks a lot for all your time and effort on my problem.
Andrew
Last edited by ALobpreis; May 20, 2014 at 3:17 PM.
Originally Posted by ALobpreis
