Jan 26, 2015, 5:28 PM
[CLOSED] Grouping grids - how to get rendered group value in the group header text
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:
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
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...ature.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!
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: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: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...ature.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!
Last edited by Daniil; Jan 27, 2015 at 11:26 AM.
Reason: [CLOSED]