PDA

View Full Version : [CLOSED] Grouping grids - how to get rendered group value in the group header text



anup
Jan 26, 2015, 5:28 PM
Hi,

In Ext.NET 1.x I was able to show the grouping text with the HTML as set by the column rendering function. Consider this 1.x example:



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

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

private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72},
new object[] { "Alcoa Inc", 29.01},
new object[] { "Altria Group Inc", 83.81},
new object[] { "American Express Company", 52.55},
new object[] { "American International Group, Inc.", 64.13}
};
}
}

</script>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Example</title>

<style type="text/css">
.high { color: green; }
.low { color: red; }
</style>

<script type="text/javascript">
function formatPriceColumn(value) {
var cls = value < 50 ? 'low' : 'high';

return "<span class='" + cls + "'>" + value + "</span>";
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:GridPanel
ID="GridPanel1"
runat="server"
StripeRows="true"
Title="Array Grid"
TrackMouseOver="true"
Width="600"
Height="350"
AutoExpandColumn="company">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
<Renderer Fn="formatPriceColumn" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GroupingView GroupTextTpl="{text}" />
</View>
</ext:GridPanel>
</body>
</html>


If I group by the second column, you would see output similar to the attached screenshot:

http://forums.ext.net/attachment.php?attachmentid=19501&stc=1

Notice that the formatting applied to the values is shown in the grouping header as it takes the rendered HTML value to show there.

Now, if I try the same (or similar!) thing in Ext.NET 3, I don't seem to get the same thing. First, here is the code I used



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

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

private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72},
new object[] { "Alcoa Inc", 29.01},
new object[] { "Altria Group Inc", 83.81},
new object[] { "American Express Company", 52.55},
new object[] { "American International Group, Inc.", 64.13}
};
}
}

</script>

<!DOCTYPE html>
<html>
<head>
<title>Ext.NET Example</title>

<style type="text/css">
.high { color: green; }
.low { color: red; }
</style>

<script type="text/javascript">
function formatPriceColumn(value) {
var cls = value < 50 ? 'low' : 'high';

return "<span class='" + cls + "'>" + value + "</span>";
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="350"
AutoExpandColumn="company">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model>
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
<Renderer Fn="formatPriceColumn" />
</ext:Column>
</Columns>
</ColumnModel>
<Features>
<ext:Grouping runat="server" GroupHeaderTplString="{columnName} {name} {renderedGroupValue}" />
</Features>
</ext:GridPanel>
</body>
</html>


Here is the resulting screenshot when I group by the same column:

http://forums.ext.net/attachment.php?attachmentid=19511&stc=1

The grouping text loses the formatting. In my production code, I replace some values with images (think traffic light icons/status images) and these are quite valuable in the grouping header text). It would be nice to have that functionality continue in Ext.NET 3.x/Ext JS 5.1.

I looked at the Sencha documentation at http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.grid.feature.Grouping for groupHeaderTpl and it says there should be a property called renderedGroupValue which I have added to the template string in the above code example, but nothing comes through.

Also, if I put a breakpoint in the XTemplate apply() method, the values don't match the documentation from Sencha. In my production code at initial render I saw all the values mentioned in the documentation (except renderedGroupValue!) and subsequent breaks into that method (e.g. view refresh) showed things like rows, view property, etc etc. In the above code example I don't even see the initial values described by the documentation (without renderedGroupValue). Any tips on better debugging these templates for future?

Thanks!

Daniil
Jan 27, 2015, 10:14 AM
Hi Anup,

Thank you for the question!

{renderedGroupValue} doesn't work in EXtJS 4 as well.
https://github.com/extnet/Ext.NET/issues/118

With ExtJS 5 the situation become worse. If ExtJS 4 has {name} working (that is actually a rendered group value), then ExtJS 5 still has {name}, but it is not a rendered group value anymore.

I hope this solution helps.

Example

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store1.DataSource = new object[]
{
new object[] { "3m Co", 71.72},
new object[] { "Alcoa Inc", 29.01},
new object[] { "Altria Group Inc", 83.81},
new object[] { "American Express Company", 52.55},
new object[] { "American International Group, Inc.", 64.13}
}; ;
}
}
</script>

<!DOCTYPE html>
<html>
<head>
<title>Ext.NET v3 Example</title>

<style>
.high {
color: green;
}

.low {
color: red;
}
</style>

<script>
var formatPriceColumn = function (value) {
var cls = value < 50 ? 'low' : 'high';

return "<span class='" + cls + "'>" + value + "</span>";
};

var getGroupText = function (values, parent) {
var grid = parent.view.panel,
col = grid.headerCt.child(Ext.String.format("gridcolumn[dataIndex={0}]", values.groupField)),
value = values.groupValue;

if (col.renderer) {
value = col.renderer.apply(col, [value]); // You might need to pass other parameters that is used inside a Column's Renderer
}

return Ext.String.format("{0}: {1}", values.columnName, value);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel runat="server" Width="600" 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" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column runat="server" Text="Price" DataIndex="price">
<Renderer Fn="formatPriceColumn" />
</ext:Column>
</Columns>
</ColumnModel>
<Features>
<ext:Grouping runat="server" GroupHeaderTplString="{[ getGroupText(values, parent) ]}" />
</Features>
</ext:GridPanel>
</body>
</html>

anup
Jan 27, 2015, 11:22 AM
Hi,

Thanks for quick reply, as always! And more importantly, for the explanation and solution - neat workaround.

Many thanks! Please mark as closed.

Daniil
Jun 23, 2015, 10:32 AM
It has been fixed in ExtJS 5.1.1 and going to Ext.NET 3.2.0 release (already in SVN trunk).