Apr 14, 2014, 11:34 AM
Locking Column along with Totals row in Grid Panel
Hi Guys,
I have one grid panel with Totals row in Field Container in bottom, i want first column of GridPanel to be locked if i use Locked Property of column it is not working.Could you please take a look and Provide any suggestions.
Please find my code below
I have one grid panel with Totals row in Field Container in bottom, i want first column of GridPanel to be locked if i use Locked Property of column it is not working.Could you please take a look and Provide any suggestions.
Please find my code below
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Totalsrow.aspx.cs" Inherits="Totalsrow" %>
<!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)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] {"First", "1.1", "1.01"},
new object[] {"Second", "2.2", "2.02"},
new object[] {"Third", "3.3", "3.01"}
};
store.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>GridPanel with Total Row - Ext.Net Example</title>
<script>
var updateTotal = function (grid, container) {
if (!grid.view.rendered) {
return;
}
var field,
value,
width,
data = { test1: null,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.updateLayout();
};
</script>
<style>
.total-field{
background-color : #fff;
padding : 0px 1px 1px 1px;
margin-right : 1px;
}
.total-field .x-form-display-field{
border : solid 1px silver;
font-weight : bold !important;
font-size : 11px;
font-family : tahoma, arial, verdana, sans-serif;
color : #000;
padding : 0px 0px 0px 5px;
height : 22px;
margin-top : 0px;
padding-top : 3px;
}
</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" Width="1000" Height="200">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" />
<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" Width="170" Locked="true" >
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
<ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" >
<Listeners>
<Refresh Handler="updateTotal(this.panel, #{Container1});" />
<BodyScroll Handler="App.Container1.getOverflowEl().scrollTo('left', t.scrollLeft);" />
</Listeners>
</ext:GridView>
</View>
<Listeners>
<ColumnResize Handler="updateTotal(this, #{Container1});" />
<ColumnMove Handler="updateTotal(this, #{Container1});" />
<ColumnHide Handler="updateTotal(this, #{Container1});" />
</Listeners>
<DockedItems>
<ext:FieldContainer
ID="Container1"
runat="server"
Layout="HBoxLayout"
Dock="Bottom"
StyleSpec="margin-top:2px;overflow-x: hidden;"
AutoScroll="true">
<Listeners>
<AfterRender Handler="this.getOverflowEl().setStyle({ 'overflow-x': 'hidden' })" />
</Listeners>
<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:FieldContainer>
</DockedItems>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Apr 14, 2014 at 10:30 PM.
Reason: Please use [CODE] tags
