Mar 03, 2009, 8:38 AM
[CLOSED] GridPanel columns width
Hi Vlad,
can you please check my sample code?
Sometimes I can't know wich of the columns can be set as AutoExpandColumn, so that I tried this code.
You can see code works for grid with fixed width, I encountered problems with AutoWidth:
some of the columns header are not rendered. Is that a bug or my error?
Didn't see anything about it in forum, sorry if it has been already solved
Thanx
Matteo
can you please check my sample code?
Sometimes I can't know wich of the columns can be set as AutoExpandColumn, so that I tried this code.
You can see code works for grid with fixed width, I encountered problems with AutoWidth:
some of the columns header are not rendered. Is that a bug or my error?
Didn't see anything about it in forum, sorry if it has been already solved
Thanx
Matteo
//DESIGN
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestControl.aspx.cs" Inherits="TestControl" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>
<script type="text/javascript">
var template = '{1}';
var change = function(value) {
return String.format(template, (value > 0) ? 'green' : 'red', value);
}
var pctChange = function(value) {
return String.format(template, (value > 0) ? 'green' : 'red', value + '%');
}
var autoSizeColumns = function(grid, fixedWidth) {
var count = grid.colModel.getColumnCount();
for (var i = 0; i < count; i++) setColumnWidth(grid, i, count, fixedWidth);
}
function setColumnWidth(grid, c, count, fixedWidth) {
var w = (fixedWidth) ? grid.width - 10 : grid.getBox(false).width - 10;
grid.colModel.setColumnWidth(c, Math.round(w / count));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" AjaxViewStateMode="Include" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Name" />
<ext:RecordField Name="Price" />
<ext:RecordField Name="Change" />
<ext:RecordField Name="PctChange" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<br />
<h1>
FIXED WIDTH GRID</h1>
<ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1" StripeRows="true"
Title="Company List" Width="600" Height="400">
<Listeners>
<Render Handler="autoSizeColumns(this,true);" />
</Listeners>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="Name" />
<ext:Column Header="Price" Sortable="true" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="Change" Sortable="true" DataIndex="Change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column Header="Change" Sortable="true" DataIndex="PctChange">
<Renderer Fn="pctChange" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
<br />
<br />
<h1>
AUTOWIDTH GRID</h1>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
Title="Company List" AutoWidth="true" AutoHeight="true">
<Listeners>
<Render Handler="autoSizeColumns(this,false);" />
</Listeners>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="Name" />
<ext:Column Header="Price" Sortable="true" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="Change" Sortable="true" DataIndex="Change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column Header="Change" Sortable="true" DataIndex="PctChange">
<Renderer Fn="pctChange" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
// CODE
protected void Page_Load(object sender, EventArgs e)
{
Company _c = new Company("3m Co", 71.72, 0.02, 0.03);
Company _c1 = new Company("Coolite Inc.", 79.72, 0.02, 0.03);
List<Company> _l = new List<Company>();
_l.Add(_c);
_l.Add(_c1);
this.Store1.DataSource = _l;
this.Store1.DataBind();
}
public class Company
{
private string _name;
public string Name
{
get { return _name; }
set { _name = value; }
}
private double _price;
public double Price
{
get { return _price; }
set { _price = value; }
}
private double _change;
public double Change
{
get { return _change; }
set { _change = value; }
}
private double _pctChange;
public double PctChange
{
get { return _pctChange; }
set { _pctChange = value; }
}
public Company(string name, double price, double change, double pctChange)
{
this.Name = name;
this.Price = price;
this.Change = change;
this.PctChange = pctChange;
}
}
