Jan 24, 2013, 1:16 PM
gridPanel with Total Row and Row Expander Plugin
Hi,
I have a problem with combining gridPanel "Total Row" and "Row Expander Plugin" presents problems displaying the total, I think the "Refresh" is not able to add records and show total. Any suggestions.
I have a problem with combining gridPanel "Total Row" and "Row Expander Plugin" presents problems displaying the total, I think the "Refresh" is not able to add records and show total. Any suggestions.
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] {"1", "1.1", "1.01"},
new object[] {"2", "2.2", "2.02"},
new object[] {"3", "3.3", "3.01"}
};
store.DataBind();
}
}
[DirectMethod]
public static string GetGrid(Dictionary<string, string> parameters)
{
// string id = parameters["id"];
List<object> data = new List<object>();
for (int i = 1; i <= 10; i++)
{
data.Add(new { ID = "P" + i, Name = "Product " + i });
}
GridPanel grid = new GridPanel
{
Height = 200,
EnableColumnHide = false,
Store =
{
new Store
{
Model = {
new Model {
IDProperty = "ID",
Fields =
{
new ModelField("ID"),
new ModelField("Name")
}
}
},
DataSource = data
}
},
ColumnModel =
{
Columns =
{
new Column { Text = "Products's Name", DataIndex = "Name" }
}
}
};
return ComponentLoader.ToConfig(grid);
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>GridPanel with Total Row - Ext.Net Example</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var updateTotal = function (grid, container) {
if (!grid.view.rendered) {
return;
}
var field,
value,
width,
data = { test1: 0, test2: 0, test3: 0 },
c,
cs = grid.headerCt.getVisibleGridColumns();
for (var j = 0, jlen = grid.store.getCount() ; j < jlen; j++) {
var r = grid.store.getAt(j);
for (var i = 0, len = cs.length; i < len; i++) {
c = cs[i];
if (c.dataIndex) {
data[c.dataIndex] += r.get(c.dataIndex);
}
}
}
container.suspendLayout = true;
for (var i = 0; i < cs.length; i++) {
c = cs[i];
value = data[c.dataIndex];
field = container.down('component[name="' + c.dataIndex + '"]');
container.remove(field, false);
container.insert(i, field);
width = c.getWidth();
field.setWidth(width - 1);
field.setValue(c.renderer ? (c.renderer)(value, {}, {}, 0, i, grid.store, grid.view) : value);
}
container.items.each(function (field) {
var column = grid.headerCt.down('component[dataIndex="' + field.name + '"]');
field.setVisible(column.isVisible());
});
container.suspendLayout = false;
container.doComponentLayout();
};
</script>
<style>
.total-field{
background-color : #fff;
border : solid 1px silver;
padding : 0px 1px 1px 1px;
margin-right : 1px;
position: absolute;
}
.total-field .x-form-display-field{
font-weight : bold !important;
font-size : 11px;
font-family : tahoma, arial, verdana, sans-serif;
color : #000;
padding : 3px 0px 2px 5px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<h1>GridPanel with Total Row</h1>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" Type="Int"/>
<ext:ModelField Name="test2" Type="Float"/>
<ext:ModelField Name="test3" Type="Float"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test1" DataIndex="test1" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" Flex="1" />
<ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" Flex="1" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server">
<Listeners>
<Refresh Handler="updateTotal(this.panel, #{Container1});" />
</Listeners>
</ext:GridView>
</View>
<Listeners>
<ColumnResize Handler="updateTotal(this, #{Container1});" />
<ColumnMove Handler="updateTotal(this, #{Container1});" />
<ColumnHide Handler="updateTotal(this, #{Container1});" />
</Listeners>
<DockedItems>
<ext:Container ID="Container1" runat="server" Layout="HBoxLayout" Dock="Bottom" StyleSpec="margin-top:2px;">
<Defaults>
<ext:Parameter Name="height" Value="22" />
</Defaults>
<Items>
<ext:DisplayField ID="DisplayField1"
runat="server"
Name="test1"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField2"
runat="server"
Name="test2"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField3"
runat="server"
Name="test3"
Cls="total-field"
Text="-"
/>
</Items>
</ext:Container>
</DockedItems>
<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server" >
<Loader ID="Loader1" runat="server" DirectMethod="#{DirectMethods}.GetGrid" Mode="Component" >
<LoadMask ShowMask="true" />
<Params>
<ext:Parameter Name="id" Value="this.record.getId()" Mode="Raw" />
</Params>
</Loader>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
Originally Posted by Daniil
