Printable View
I have a grid that has a large amount of columns (some visible, some not). When I go to add more columns to the grid via the column header menu, the list of available columns extends past the bottom of the screen. Is it possible to organize that menu differently? Perhaps being able to scroll it or have multiple menu columns?
Hi,
A vertical scrollbar appears for me in the example below.
As well there is a way to change the columns menu in the example.
Example
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < 50; i++)
{
Column c = new Column()
{
Header = "Test" + i,
DataIndex = "test"
};
this.GridPanel1.ColumnModel.Columns.Add(c);
}
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test" },
};
store.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 runat="server">
<title>Ext.NET Example</title>
<script type="text/javascript">
var onRender = function (grid) {
var view = grid.getView();
view.colMenu.un("beforeshow", view.beforeColMenuShow, view);
view.colMenu.on("beforeshow", customBeforeColMenuShow, view);
};
var customBeforeColMenuShow = function () {
//Here is the original code of .beforeColMenuShow()
var colModel = this.cm,
colCount = colModel.getColumnCount(),
colMenu = this.colMenu,
i;
colMenu.removeAll();
for (i = 0; i < colCount; i++) {
if (colModel.config[i].hideable !== false) {
colMenu.add(new Ext.menu.CheckItem({
text : colModel.getColumnHeader(i),
itemId : 'col-' + colModel.getColumnId(i),
checked : !colModel.isHidden(i),
disabled : colModel.config[i].hideable === false,
hideOnClick : false
}));
}
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Window runat="server" Title="Example" Height="350" Width="500" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<Listeners>
<Render Handler="onRender(this);" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Window>
</form>
</body>
</html>