Nov 08, 2014, 5:06 AM
[CLOSED] Right border declared through css style not showing up in a locked column header
Hi:
If you run the code below you'll notice that the red right border of the Change header doesn't show up. It does show up on the top header. When I debug using F12 in IE 11 the border setting is reported red yet it is not visible. Maybe this is something simple that escapes me. I had a similar issue here: http://forums.ext.net/showthread.php...481#post209481 but the fix doesn't work in this case. I wonder if it's something else.
Any idea?
Thank you!
If you run the code below you'll notice that the red right border of the Change header doesn't show up. It does show up on the top header. When I debug using F12 in IE 11 the border setting is reported red yet it is not visible. Maybe this is something simple that escapes me. I had a similar issue here: http://forums.ext.net/showthread.php...481#post209481 but the fix doesn't work in this case. I wonder if it's something else.
Any idea?
Thank you!
<%@ 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.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>
#Company-titleEl {
border-right: 1px solid green;
}
#Change-titleEl {
border-right: 1px solid red;
}
</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 sss</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 ID="Company" runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Locked="true" Sortable="false">
<Columns>
<ext:Column ID="Change" runat="server" Text="Change" DataIndex="change" Width="125">
<Renderer Fn="change" />
</ext:Column>
</Columns>
</ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="price" Width="125" Locked="true">
<Renderer Format="UsMoney" />
</ext:Column>
<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>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="135"/>
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>
Last edited by Daniil; Nov 11, 2014 at 5:38 PM.
Reason: [CLOSED]
