PDA

View Full Version : [OPEN] [#594] Grouped Header is not truncated when the column text is too long



bogc
Nov 03, 2014, 6:25 PM
Hello:

Please see the screenshot below:
http://forums.ext.net/attachment.php?attachmentid=15961&stc=1

This issue did not appear in the 2.2 version of Ext.Net.

To reproduce please run this sample (modified version of this example http://examples2.ext.net/#/GridPanel/Miscellaneous/ColumnHeaderGroup/):



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}

private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Grouped Header Example - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}
</style>

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<h1>Grouped Header Example</h1>
<p>This example shows how to create a grid with column headers which are nested within category headers.</p>
<p>Category headers do not reference Model fields via a <code>dataIndex</code>, rather they contain
child header definitions (which may themselves either contain a <code>dataIndex</code> or more levels of headers).</p>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Grouped Header Grid"
Width="600"
ColumnLines="true"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company Company Company Company Company Company Company Company Company Company Company Company Company Company Company Company" DataIndex="company" Flex="1" Sortable="false" />

<ext:Column runat="server" Text="Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price" >
<Columns>
<ext:Column runat="server" Text="Price" DataIndex="price" Width="75" Sortable="true">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change" Width="75" Sortable="true">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change %" DataIndex="pctChange" Width="75" Sortable="true">
<Renderer Fn="pctChange" />
</ext:Column>
</Columns>
</ext:Column>

<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="85" Sortable="true" Format="dd/MM/yyyy" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>


Any suggestions on how to fix it to get the previous behaviour?

Thanks

bogc
Nov 03, 2014, 6:48 PM
Ok, this seems to work:



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}

private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Grouped Header Example - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}


#stockPrice {
width: 225px;
}

#stockPrice-textEl {
width: 100%;
overflow: hidden;
}
</style>

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<h1>Grouped Header Example</h1>
<p>This example shows how to create a grid with column headers which are nested within category headers.</p>
<p>Category headers do not reference Model fields via a <code>dataIndex</code>, rather they contain
child header definitions (which may themselves either contain a <code>dataIndex</code> or more levels of headers).</p>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Grouped Header Grid"
Width="600"
ColumnLines="true"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company Company Company Company Company Company Company Company Company Company Company Company Company Company Company Company" DataIndex="company" Flex="1" Sortable="false" />

<ext:Column runat="server" ID="stockPrice" Text="Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price" >
<Columns>
<ext:Column runat="server" Text="Price" DataIndex="price" Width="75" Sortable="true">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change" Width="75" Sortable="true">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change %" DataIndex="pctChange" Width="75" Sortable="true">
<Renderer Fn="pctChange" />
</ext:Column>
</Columns>
</ext:Column>

<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="85" Sortable="true" Format="dd/MM/yyyy" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>


These are the changes that I added:


#stockPrice {
width: 225px;
}

#stockPrice-textEl {
width: 100%;
}


225 = 3 * 75 where 75 is the width of each column under the StockPrice column.

and I assigned the ID "stockPrice" to the stock price column:


<ext:Column runat="server" ID="stockPrice" Text="Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price" >



Any other better solution?

Vladimir
Nov 04, 2014, 9:18 AM
Hi,

I can suggest to use the following override


Ext.grid.column.Column.override({
afterRender: function () {
this.callParent(arguments);


if (this.isGroupHeader) {
var width = 0;
this.items.each(function (item) {
width += item.getWidth();
});
this.setWidth(width);
}
}
});

bogc
Nov 04, 2014, 5:28 PM
Hi, Vlad:

I think the approach with the stylesheet works better. Yours works too right after the initial render, but as soon as I resize the column (try resizing the Stock Price column by increasing it size to the right) the grid gets into a weird mode where the Last Updated column is not aligned properly with the column header. See the included screenshot.

16011

Daniil
Nov 07, 2014, 10:30 AM
Hi @bogc,

Probably, Vladimir's code should be applied on column resizing as well.

Though, you could use your CSS fix if it is good enough for you. Or you encounter some problem with that?

bogc
Nov 07, 2014, 4:25 PM
I used the css approach. I didn't see any issue.

Thanks

bogc
Nov 08, 2014, 4:37 AM
I think I spoke too soon.

If you try the following code and shrink the Change column (not the % Change) there is going to be same space added to the right of the % Change column. See the screenshot.

16061



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFrozenRowsAndColumns.aspx.cs" Inherits="Ext.Net.Examples.Examples.GridPanel.Locking_Grid.S imple.TestFrozenRowsAndColumns" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};

this.GridPanel1.Store.Primary.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>GridPanel with Locking Columns - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>

#stockPrice {
width: 225px;
}

#stockPrice-textEl {
width: 100%;

}
</style>
<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<h1>GridPanel with Locking Columns</h1>

<p>This example shows how to achieve "freeze pane" locking functionality similar to Excel.</p>
<p>Columns may be locked or unlocked by dragging them across into the opposite side, or by using the column's header menu.</p>
<p>The "Price" column is not lockable, and may not be dragged into the locked side, or locked using the header menu.</p>
<p>It is not possible to lock <i>all</i> columns using the user interface. The unlocked side must always contain at least one column.</p>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Locking Grid"
Width="600"
Height="350">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" />
<ext:Column runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Locked="true" Sortable="false" />
<ext:Column runat="server" Text="Price" DataIndex="price" Width="125" Locked="false">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ID="stockPrice" runat="server" Text="Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price Stock Price ">
<Columns>
<ext:Column runat="server" Text="Change" DataIndex="change" Width="125">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="125">
<Renderer Fn="pctChange" />
</ext:Column>
</Columns>
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="135"/>
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>




So perhaps Vladimir's approach might be better. But I am not too sure how I can respond to the column resize operations. If you can post the workaround that would be great.

Thank you

Daniil
Nov 10, 2014, 7:40 AM
Please try this:

Ext.grid.column.Column.override({
afterRender: function () {
var me = this;

me.callParent(arguments);

if (me.isGroupHeader) {
me.items.each(function (item) {
item.on("resize", me.onChildResize, me);
});
}
},

onChildResize: function() {
var width = 0;

this.items.each(function (item) {
width += item.getWidth();
});
this.setWidth(width);
}
});

bogc
Nov 12, 2014, 6:34 PM
This works nicely. Thanks!

Daniil
Nov 13, 2014, 6:54 AM
Thank you for confirming.

I created an Issue for that not to forget about it.
https://github.com/extnet/Ext.NET/issues/594