PDA

View Full Version : [CLOSED] GridPanel AutoWidth



Timothy
Aug 27, 2008, 3:02 PM
Hello,



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

<%@ 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">

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.MyData.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&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"}
};

this.MyData.DataBind();
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Coolite Example - Simple Array Grid</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 + '%');
}
</script>

</head>
<body>
<form id="form1" runat="server">

<ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" />

<h1>Array Grid Example</h1>

<p>This example shows how to create a grid from Array data.</p>

<ext:Store ID="MyData" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<div style="width: 600px;">
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="MyData"
StripeRows="true"
Title="Array Grid"
AutoExpandColumn="Company"
AutoWidth="True"
AutoHeight="True">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnId="Company" Header="Company" Sortable="true" DataIndex="company" />
<ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
<Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
</ext:Column>
</Columns>
</ColumnModel>
<SelModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelModel>
</ext:GridPanel>


</form>
</body>
</html>


Works in FF3.0 fails in IE6.0 ? Width runs on forever.

Thoughts? ;)

Cheers,
Timothy

Timothy
Aug 28, 2008, 8:18 AM
Hmmm, just to let you know StyleSpec is also not working with it ...

Cheers,
Timothy

geoffrey.mcgill
Aug 28, 2008, 9:58 AM
Regarding the GridPanel width issue in IE6, please add the following css class to your page.

Example


<style type="text/css">
.x-grid3-header-offset {width: auto;}
</style>

I would prefer if that css class was only added when rendering to IE6, for the other browsers the fix should not be required.

I'm not sure what you mean by "just to let you know StyleSpec is also not working with it". Can you post some code to demonstrate?

Timothy
Aug 28, 2008, 10:00 AM
Thanks Geoffrey,

I was using StyleSpec on the GridPanel like the following:



<Ext:GridPanel runat="server" AutoHeight="True" StyleSpec="width: 100%;"> ...


;)

Cheers,
Timothy

Timothy
Aug 28, 2008, 10:01 AM
Awesome Geoffrey, your recommendation worked in IE6:



* html .x-grid3-header-offset {
width: auto;
}


Oh, and on a side note I'm extremely pleased with your progress so far in the past couple revisions; 0.6 is beginning to look solid. Thanks for all the efforts to both of you.

Cheers,
Timothy

geoffrey.mcgill
Aug 28, 2008, 1:28 PM
Hi Timothy,

I just added the IE6 "x-grid3-header-offset" fix as default functionality for the <ext:GridPanel> when rendering in IE6 only.

The "x-grid3-header-offset" css class will be added automatically if browser is IE6. The fix does not appear to be required if any other browser.

You do not have to add the css fix manually.

Thanks for the feedback! The last 'big thing' on my list is the <asp:UpdatePanel> enhancements. I'm not sure how long it will take to finish up and test, but I'm hoping to have something good committed to SVN by end of day tomorrow. Once the new <asp:UpdatePanel> code is committed we'll probably be releasing the v0.6 Preview publicly.

Timothy
Aug 28, 2008, 1:31 PM
Awesome, I'll check out the changes and remove my hack.

Great news regarding the preview; send me a note when you have the UpdatePanel changes checked into SVN and I'll slam it into my current project to check some scenarios ;)

Cheers,
Timothy

geoffrey.mcgill
Aug 28, 2008, 1:34 PM
Will do.

We also added some new <ext:GridPanel> samples today and I though you might be interested, see http://sandbox.ext.net/GridPanel/Grid3%20example/

Timothy
Aug 28, 2008, 1:41 PM
Cool samples!

Cheers,
Timothy

Timothy
Sep 03, 2008, 9:41 AM
Geoffrey,

Have you had any luck with the UpdatePanel enhancements? I would love to give them a test drive before the public preview to help iron it out ;)

Cheers,
Timothy

Timothy
Nov 18, 2008, 6:20 PM
geoffrey.mcgill (8/28/2008)Hi Timothy,

I just added the IE6 "x-grid3-header-offset" fix as default functionality for the <ext:GridPanel> when rendering in IE6 only.

The "x-grid3-header-offset" css class will be added automatically if browser is IE6. The fix does not appear to be required if any other browser.

You do not have to add the css fix manually.

Thanks for the feedback! The last 'big thing' on my list is the <asp:UpdatePanel> enhancements. I'm not sure how long it will take to finish up and test, but I'm hoping to have something good committed to SVN by end of day tomorrow. Once the new <asp:UpdatePanel> code is committed we'll probably be releasing the v0.6 Preview publicly.


Geoffrey,

Please confirm, did the above CSS hack disappear from SVN?

Cheers,
Timothy

geoffrey.mcgill
Nov 18, 2008, 6:50 PM
No. The fix is still included. See GridPanelBase.cs, approx line #25. 

If you view the html page source in IE6, the css class should be rendered into the <head>.

Timothy
Nov 19, 2008, 9:30 AM
OK, does that work when the GridPanel is in a TabPanel as DeferredRender=True ?

I tried to replicate the problem, but I'm bumping into something else with the following example, maybe you can help fix my simple example and then I can demonstrate?

Example.aspx:


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

<%@ 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">

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.MyData.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&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"}
};

this.MyData.DataBind();
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Coolite Example - Simple Array Grid</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 + '%');
}
</script>

</head>
<body>
<form id="form1" runat="server">

<ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" />

<h1>Array Grid Example</h1>

<p>This example shows how to create a grid from Array data.</p>

<ext:Store ID="MyData" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:TabPanel runat="server" AutoPostBack="True" AutoHeight="True" AutoWidth="True" DeferredRender="True">
<Tabs>
<ext:Tab ID="Tab1" runat="server" AutoHeight="True" Title="Tab 1">
<Body>
Word
</Body>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" AutoHeight="True" Title="Tab 2">
<Body>
<ext:FitLayout runat="server">
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="MyData"
StripeRows="true"
Title="Array Grid"
AutoExpandColumn="Company"
AutoWidth="True"
AutoHeight="True">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnId="Company" Header="Company" Sortable="true" DataIndex="company" />
<ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
<Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</ext:FitLayout>
</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</form>
</body>
</html>


Cheers for the help Geoffrey,

Timothy